diff --git a/assets/src/bundles/browse/origin-search.js b/assets/src/bundles/browse/origin-search.js
index 5b3507cd..d1997d52 100644
--- a/assets/src/bundles/browse/origin-search.js
+++ b/assets/src/bundles/browse/origin-search.js
@@ -1,262 +1,267 @@
 /**
  * Copyright (C) 2018-2021  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import {handleFetchError} from 'utils/functions';
 
 const limit = 100;
 let linksPrev = [];
 let linkNext = null;
 let linkCurrent = null;
 let inSearch = false;
 
 function parseLinkHeader(s) {
   let re = /<(.+)>; rel="next"/;
   return s.match(re)[1];
 }
 
 function fixTableRowsStyle() {
   setTimeout(() => {
     $('#origin-search-results tbody tr').removeAttr('style');
   });
 }
 
 function clearOriginSearchResultsTable() {
   $('#origin-search-results tbody tr').remove();
 }
 
 function populateOriginSearchResultsTable(origins) {
   if (origins.length > 0) {
     $('#swh-origin-search-results').show();
     $('#swh-no-result').hide();
     clearOriginSearchResultsTable();
     let table = $('#origin-search-results tbody');
     for (let [i, origin] of origins.entries()) {
       let browseUrl = `${Urls.browse_origin()}?origin_url=${encodeURIComponent(origin.url)}`;
       let tableRow =
         `<tr id="origin-${i}" class="swh-search-result-entry swh-tr-hover-highlight">`;
       tableRow +=
         `<td id="visit-type-origin-${i}" class="swh-origin-visit-type" style="width: 120px;">` +
         '<i title="Checking software origin type" class="mdi mdi-sync mdi-spin mdi-fw"></i>' +
         'Checking</td>';
       tableRow +=
         '<td style="white-space: nowrap;">' +
         `<a href="${browseUrl}">${origin.url}</a></td>`;
       tableRow +=
         `<td class="swh-visit-status" id="visit-status-origin-${i}">` +
         '<i title="Checking archiving status" class="mdi mdi-sync mdi-spin mdi-fw"></i>' +
         'Checking</td>';
       tableRow += '</tr>';
       table.append(tableRow);
       // get async latest visit snapshot and update visit status icon
       let latestSnapshotUrl = Urls.api_1_origin_visit_latest(origin.url);
       latestSnapshotUrl += '?require_snapshot=true';
       fetch(latestSnapshotUrl)
         .then(response => {
           if (response.status === 404) {
             throw new Error();
           }
           return response.json();
         })
         .then(data => {
           if (data.type) {
             $(`#visit-type-origin-${i}`).html(data.type);
             $(`#visit-status-origin-${i}`).html(
               '<i title="Software origin has been archived by Software Heritage" ' +
               'class="mdi mdi-check-bold mdi-fw"></i>Archived');
           } else {
             throw new Error();
           }
         })
         .catch(() => {
           $(`#visit-type-origin-${i}`).html('unknown');
           $(`#visit-status-origin-${i}`).html(
             '<i title="Software origin archival by Software Heritage is pending" ' +
             'class="mdi mdi-close-thick mdi-fw"></i>Pending archival');
           if ($('#swh-filter-empty-visits').prop('checked')) {
             $(`#origin-${i}`).remove();
           }
         });
     }
     fixTableRowsStyle();
   } else {
     $('#swh-origin-search-results').hide();
     $('#swh-no-result').text('No origins matching the search criteria were found.');
     $('#swh-no-result').show();
   }
 
   if (linkNext === null) {
     $('#origins-next-results-button').addClass('disabled');
   } else {
     $('#origins-next-results-button').removeClass('disabled');
   }
 
   if (linksPrev.length === 0) {
     $('#origins-prev-results-button').addClass('disabled');
   } else {
     $('#origins-prev-results-button').removeClass('disabled');
   }
 
   inSearch = false;
   setTimeout(() => {
     window.scrollTo(0, 0);
   });
 }
 
 function searchOriginsFirst(searchQueryText, limit) {
   let baseSearchUrl;
   let searchMetadata = $('#swh-search-origin-metadata').prop('checked');
   if (searchMetadata) {
     baseSearchUrl = new URL(Urls.api_1_origin_metadata_search(), window.location);
     baseSearchUrl.searchParams.append('fulltext', searchQueryText);
   } else {
     baseSearchUrl = new URL(Urls.api_1_origin_search(searchQueryText), window.location);
   }
 
   let withVisit = $('#swh-search-origins-with-visit').prop('checked');
   baseSearchUrl.searchParams.append('limit', limit);
   baseSearchUrl.searchParams.append('with_visit', withVisit);
   const visitType = $('#swh-search-visit-type').val();
   if (visitType !== 'any') {
     baseSearchUrl.searchParams.append('visit_type', visitType);
   }
   let searchUrl = baseSearchUrl.toString();
   searchOrigins(searchUrl);
 }
 
 function searchOrigins(searchUrl) {
   clearOriginSearchResultsTable();
   $('.swh-loading').addClass('show');
   let response = fetch(searchUrl)
     .then(handleFetchError)
     .then(resp => {
       response = resp;
       return response.json();
     })
     .then(data => {
       // Save link to the current results page
       linkCurrent = searchUrl;
       // Save link to the next results page.
       linkNext = null;
       if (response.headers.has('Link')) {
         let parsedLink = parseLinkHeader(response.headers.get('Link'));
         if (parsedLink !== undefined) {
           linkNext = parsedLink;
         }
       }
       // prevLinks is updated by the caller, which is the one to know if
       // we're going forward or backward in the pages.
 
       $('.swh-loading').removeClass('show');
       populateOriginSearchResultsTable(data);
     })
     .catch(response => {
       $('.swh-loading').removeClass('show');
       inSearch = false;
       $('#swh-origin-search-results').hide();
       $('#swh-no-result').text(`Error ${response.status}: ${response.statusText}`);
       $('#swh-no-result').show();
     });
 }
 
 function doSearch() {
   $('#swh-no-result').hide();
   let searchQueryText = $('#swh-origins-url-patterns').val();
   inSearch = true;
   if (searchQueryText.startsWith('swh:')) {
     // searchQueryText may be a PID so sending search queries to PID resolve endpoint
     let resolveSWHIDUrl = Urls.api_1_resolve_swhid(searchQueryText);
     fetch(resolveSWHIDUrl)
       .then(handleFetchError)
       .then(response => response.json())
       .then(data => {
         // SWHID has been successfully resolved,
         // so redirect to browse page
         window.location = data.browse_url;
       })
       .catch(response => {
         // display a useful error message if the input
         // looks like a SWHID
         response.json().then(data => {
           $('#swh-origin-search-results').hide();
           $('.swh-search-pagination').hide();
           $('#swh-no-result').text(data.reason);
           $('#swh-no-result').show();
         });
 
       });
   } else {
     // otherwise, proceed with origins search
     $('#swh-origin-search-results').show();
     $('.swh-search-pagination').show();
     searchOriginsFirst(searchQueryText, limit);
   }
 }
 
 export function initOriginSearch() {
   $(document).ready(() => {
     $('#swh-search-origins').submit(event => {
       event.preventDefault();
-      let searchQueryText = $('#swh-origins-url-patterns').val().trim();
-      let withVisit = $('#swh-search-origins-with-visit').prop('checked');
-      let withContent = $('#swh-filter-empty-visits').prop('checked');
-      let searchMetadata = $('#swh-search-origin-metadata').prop('checked');
-      const visitType = $('#swh-search-visit-type').val();
-      let queryParameters = new URLSearchParams();
-      queryParameters.append('q', searchQueryText);
-      if (withVisit) {
-        queryParameters.append('with_visit', withVisit);
-      }
-      if (withContent) {
-        queryParameters.append('with_content', withContent);
-      }
-      if (searchMetadata) {
-        queryParameters.append('search_metadata', searchMetadata);
-      }
-      if (visitType !== 'any') {
-        queryParameters.append('visit_type', visitType);
+      if (event.target.checkValidity()) {
+        $(event.target).removeClass('was-validated');
+        let searchQueryText = $('#swh-origins-url-patterns').val().trim();
+        let withVisit = $('#swh-search-origins-with-visit').prop('checked');
+        let withContent = $('#swh-filter-empty-visits').prop('checked');
+        let searchMetadata = $('#swh-search-origin-metadata').prop('checked');
+        const visitType = $('#swh-search-visit-type').val();
+        let queryParameters = new URLSearchParams();
+        queryParameters.append('q', searchQueryText);
+        if (withVisit) {
+          queryParameters.append('with_visit', withVisit);
+        }
+        if (withContent) {
+          queryParameters.append('with_content', withContent);
+        }
+        if (searchMetadata) {
+          queryParameters.append('search_metadata', searchMetadata);
+        }
+        if (visitType !== 'any') {
+          queryParameters.append('visit_type', visitType);
+        }
+        // Update the url, triggering page reload and effective search
+        window.location = `${Urls.browse_search()}?${queryParameters.toString()}`;
+      } else {
+        $(event.target).addClass('was-validated');
       }
-      // Update the url, triggering page reload and effective search
-      window.location = `${Urls.browse_search()}?${queryParameters.toString()}`;
     });
 
     $('#origins-next-results-button').click(event => {
       if ($('#origins-next-results-button').hasClass('disabled') || inSearch) {
         return;
       }
       inSearch = true;
       linksPrev.push(linkCurrent);
       searchOrigins(linkNext);
       event.preventDefault();
     });
 
     $('#origins-prev-results-button').click(event => {
       if ($('#origins-prev-results-button').hasClass('disabled') || inSearch) {
         return;
       }
       inSearch = true;
       searchOrigins(linksPrev.pop());
       event.preventDefault();
     });
 
     let urlParams = new URLSearchParams(window.location.search);
     let query = urlParams.get('q');
     let withVisit = urlParams.has('with_visit');
     let withContent = urlParams.has('with_content');
     let searchMetadata = urlParams.has('search_metadata');
     let visitType = urlParams.get('visit_type');
     if (query) {
       $('#swh-origins-url-patterns').val(query);
       $('#swh-search-origins-with-visit').prop('checked', withVisit);
       $('#swh-filter-empty-visits').prop('checked', withContent);
       $('#swh-search-origin-metadata').prop('checked', searchMetadata);
       if (visitType) {
         $('#swh-search-visit-type').val(visitType);
       }
       doSearch();
     }
   });
 }
diff --git a/assets/src/bundles/webapp/webapp-utils.js b/assets/src/bundles/webapp/webapp-utils.js
index f1cd9e90..21616ea9 100644
--- a/assets/src/bundles/webapp/webapp-utils.js
+++ b/assets/src/bundles/webapp/webapp-utils.js
@@ -1,357 +1,376 @@
 /**
- * Copyright (C) 2018-2020  The Software Heritage developers
+ * Copyright (C) 2018-2021  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import objectFitImages from 'object-fit-images';
 import {selectText} from 'utils/functions';
 import {BREAKPOINT_MD} from 'utils/constants';
 
 let collapseSidebar = false;
 let previousSidebarState = localStorage.getItem('remember.lte.pushmenu');
 if (previousSidebarState !== undefined) {
   collapseSidebar = previousSidebarState === 'sidebar-collapse';
 }
 
 $(document).on('DOMContentLoaded', () => {
   // set state to collapsed on smaller devices
   if ($(window).width() < BREAKPOINT_MD) {
     collapseSidebar = true;
   }
 
   // restore previous sidebar state (collapsed/expanded)
   if (collapseSidebar) {
     // hack to avoid animated transition for collapsing sidebar
     // when loading a page
     let sidebarTransition = $('.main-sidebar, .main-sidebar:before').css('transition');
     let sidebarEltsTransition = $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition');
     $('.main-sidebar, .main-sidebar:before').css('transition', 'none');
     $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', 'none');
     $('body').addClass('sidebar-collapse');
     $('.swh-words-logo-swh').css('visibility', 'visible');
     // restore transitions for user navigation
     setTimeout(() => {
       $('.main-sidebar, .main-sidebar:before').css('transition', sidebarTransition);
       $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', sidebarEltsTransition);
     });
   }
 });
 
 $(document).on('collapsed.lte.pushmenu', event => {
   if ($('body').width() >= BREAKPOINT_MD) {
     $('.swh-words-logo-swh').css('visibility', 'visible');
   }
 });
 
 $(document).on('shown.lte.pushmenu', event => {
   $('.swh-words-logo-swh').css('visibility', 'hidden');
 });
 
 function ensureNoFooterOverflow() {
   $('body').css('padding-bottom', $('footer').outerHeight() + 'px');
 }
 
 $(document).ready(() => {
   // redirect to last browse page if any when clicking on the 'Browse' entry
   // in the sidebar
   $(`.swh-browse-link`).click(event => {
     let lastBrowsePage = sessionStorage.getItem('last-browse-page');
     if (lastBrowsePage) {
       event.preventDefault();
       window.location = lastBrowsePage;
     }
   });
 
   const mainSideBar = $('.main-sidebar');
 
   function updateSidebarState() {
     const body = $('body');
     if (body.hasClass('sidebar-collapse') &&
         !mainSideBar.hasClass('swh-sidebar-collapsed')) {
       mainSideBar.removeClass('swh-sidebar-expanded');
       mainSideBar.addClass('swh-sidebar-collapsed');
       $('.swh-words-logo-swh').css('visibility', 'visible');
     } else if (!body.hasClass('sidebar-collapse') &&
                !mainSideBar.hasClass('swh-sidebar-expanded')) {
       mainSideBar.removeClass('swh-sidebar-collapsed');
       mainSideBar.addClass('swh-sidebar-expanded');
       $('.swh-words-logo-swh').css('visibility', 'hidden');
     }
     // ensure correct sidebar state when loading a page
     if (body.hasClass('hold-transition')) {
       setTimeout(() => {
         updateSidebarState();
       });
     }
   }
 
   // set sidebar state after collapse / expand animation
   mainSideBar.on('transitionend', evt => {
     updateSidebarState();
   });
 
   updateSidebarState();
 
   // ensure footer do not overflow main content for mobile devices
   // or after resizing the browser window
   ensureNoFooterOverflow();
   $(window).resize(function() {
     ensureNoFooterOverflow();
     if ($('body').hasClass('sidebar-collapse') && $('body').width() >= BREAKPOINT_MD) {
       $('.swh-words-logo-swh').css('visibility', 'visible');
     }
   });
   // activate css polyfill 'object-fit: contain' in old browsers
   objectFitImages();
 
   // reparent the modals to the top navigation div in order to be able
   // to display them
   $('.swh-browse-top-navigation').append($('.modal'));
 
   let selectedCode = null;
 
   function getCodeOrPreEltUnderPointer(e) {
     let elts = document.elementsFromPoint(e.clientX, e.clientY);
     for (let elt of elts) {
       if (elt.nodeName === 'CODE' || elt.nodeName === 'PRE') {
         return elt;
       }
     }
     return null;
   }
 
   // click handler to set focus on code block for copy
   $(document).click(e => {
     selectedCode = getCodeOrPreEltUnderPointer(e);
   });
 
   function selectCode(event, selectedCode) {
     if (selectedCode) {
       let hljsLnCodeElts = $(selectedCode).find('.hljs-ln-code');
       if (hljsLnCodeElts.length) {
         selectText(hljsLnCodeElts[0], hljsLnCodeElts[hljsLnCodeElts.length - 1]);
       } else {
         selectText(selectedCode.firstChild, selectedCode.lastChild);
       }
       event.preventDefault();
     }
   }
 
   // select the whole text of focused code block when user
   // double clicks or hits Ctrl+A
   $(document).dblclick(e => {
     if ((e.ctrlKey || e.metaKey)) {
       selectCode(e, getCodeOrPreEltUnderPointer(e));
     }
   });
 
   $(document).keydown(e => {
     if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
       selectCode(e, selectedCode);
     }
   });
 
   // show/hide back-to-top button
   let scrollThreshold = 0;
   scrollThreshold += $('.swh-top-bar').height() || 0;
   scrollThreshold += $('.navbar').height() || 0;
   $(window).scroll(() => {
     if ($(window).scrollTop() > scrollThreshold) {
       $('#back-to-top').css('display', 'block');
     } else {
       $('#back-to-top').css('display', 'none');
     }
   });
 
   // navbar search form submission callback
   $('#swh-origins-search-top').submit(event => {
     event.preventDefault();
-    let searchQueryText = $('#swh-origins-search-top-input').val().trim();
-    let queryParameters = new URLSearchParams();
-    queryParameters.append('q', searchQueryText);
-    queryParameters.append('with_visit', true);
-    queryParameters.append('with_content', true);
-    window.location = `${Urls.browse_search()}?${queryParameters.toString()}`;
+    if (event.target.checkValidity()) {
+      $(event.target).removeClass('was-validated');
+      let searchQueryText = $('#swh-origins-search-top-input').val().trim();
+      let queryParameters = new URLSearchParams();
+      queryParameters.append('q', searchQueryText);
+      queryParameters.append('with_visit', true);
+      queryParameters.append('with_content', true);
+      window.location = `${Urls.browse_search()}?${queryParameters.toString()}`;
+    } else {
+      $(event.target).addClass('was-validated');
+    }
   });
-
 });
 
 export function initPage(page) {
 
   $(document).ready(() => {
     // set relevant sidebar link to page active
     $(`.swh-${page}-item`).addClass('active');
     $(`.swh-${page}-link`).addClass('active');
 
     // triggered when unloading the current page
     $(window).on('unload', () => {
       // backup current browse page
       if (page === 'browse') {
         sessionStorage.setItem('last-browse-page', window.location);
       }
     });
   });
 }
 
 export function initHomePage() {
   $(document).ready(() => {
     $('.swh-coverage-list').iFrameResize({heightCalculationMethod: 'taggedElement'});
     fetch(Urls.stat_counters())
       .then(response => response.json())
       .then(data => {
         if (data.stat_counters && !$.isEmptyObject(data.stat_counters)) {
           for (let objectType of ['content', 'revision', 'origin', 'directory', 'person', 'release']) {
             const count = data.stat_counters[objectType];
             if (count !== undefined) {
               $(`#swh-${objectType}-count`).html(count.toLocaleString());
             } else {
               $(`#swh-${objectType}-count`).closest('.swh-counter-container').hide();
             }
           }
         } else {
           $('.swh-counter').html('0');
         }
         if (data.stat_counters_history && !$.isEmptyObject(data.stat_counters_history)) {
           for (let objectType of ['content', 'revision', 'origin']) {
             const history = data.stat_counters_history[objectType];
             if (history) {
               swh.webapp.drawHistoryCounterGraph(`#swh-${objectType}-count-history`, history);
             } else {
               $(`#swh-${objectType}-count-history`).hide();
             }
 
           }
         } else {
           $('.swh-counter-history').hide();
         }
       });
   });
   initPage('home');
 }
 
 export function showModalMessage(title, message) {
   $('#swh-web-modal-message .modal-title').text(title);
   $('#swh-web-modal-message .modal-content p').text(message);
   $('#swh-web-modal-message').modal('show');
 }
 
 export function showModalConfirm(title, message, callback) {
   $('#swh-web-modal-confirm .modal-title').text(title);
   $('#swh-web-modal-confirm .modal-content p').text(message);
   $('#swh-web-modal-confirm #swh-web-modal-confirm-ok-btn').bind('click', () => {
     callback();
     $('#swh-web-modal-confirm').modal('hide');
     $('#swh-web-modal-confirm #swh-web-modal-confirm-ok-btn').unbind('click');
   });
   $('#swh-web-modal-confirm').modal('show');
 }
 
 export function showModalHtml(title, html) {
   $('#swh-web-modal-html .modal-title').text(title);
   $('#swh-web-modal-html .modal-body').html(html);
   $('#swh-web-modal-html').modal('show');
 }
 
 export function addJumpToPagePopoverToDataTable(dataTableElt) {
   dataTableElt.on('draw.dt', function() {
     $('.paginate_button.disabled').css('cursor', 'pointer');
     $('.paginate_button.disabled').on('click', event => {
       const pageInfo = dataTableElt.page.info();
       let content = '<select class="jump-to-page">';
       for (let i = 1; i <= pageInfo.pages; ++i) {
         let selected = '';
         if (i === pageInfo.page + 1) {
           selected = 'selected';
         }
         content += `<option value="${i}" ${selected}>${i}</option>`;
       }
       content += `</select><span> / ${pageInfo.pages}</span>`;
       $(event.target).popover({
         'title': 'Jump to page',
         'content': content,
         'html': true,
         'placement': 'top',
         'sanitizeFn': swh.webapp.filterXSS
       });
       $(event.target).popover('show');
       $('.jump-to-page').on('change', function() {
         $('.paginate_button.disabled').popover('hide');
         const pageNumber = parseInt($(this).val()) - 1;
         dataTableElt.page(pageNumber).draw('page');
       });
     });
   });
 
   dataTableElt.on('preXhr.dt', () => {
     $('.paginate_button.disabled').popover('hide');
   });
 }
 
 let swhObjectIcons;
 
 export function setSwhObjectIcons(icons) {
   swhObjectIcons = icons;
 }
 
 export function getSwhObjectIcon(swhObjectType) {
   return swhObjectIcons[swhObjectType];
 }
 
 let browsedSwhObjectMetadata = {};
 
 export function setBrowsedSwhObjectMetadata(metadata) {
   browsedSwhObjectMetadata = metadata;
 }
 
 export function getBrowsedSwhObjectMetadata() {
   return browsedSwhObjectMetadata;
 }
 
 // This will contain a mapping between an archived object type
 // and its related SWHID metadata for each object reachable from
 // the current browse view.
 // SWHID metadata contain the following keys:
 //   * object_type: type of archived object
 //   * object_id: sha1 object identifier
 //   * swhid: SWHID without contextual info
 //   * swhid_url: URL to resolve SWHID without contextual info
 //   * context: object describing SWHID context
 //   * swhid_with_context: SWHID with contextual info
 //   * swhid_with_context_url: URL to resolve SWHID with contextual info
 let swhidsContext_ = {};
 
 export function setSwhIdsContext(swhidsContext) {
   swhidsContext_ = {};
   for (let swhidContext of swhidsContext) {
     swhidsContext_[swhidContext.object_type] = swhidContext;
   }
 }
 
 export function getSwhIdsContext() {
   return swhidsContext_;
 }
 
 function setFullWidth(fullWidth) {
   if (fullWidth) {
     $('#swh-web-content').removeClass('container');
     $('#swh-web-content').addClass('container-fluid');
   } else {
     $('#swh-web-content').removeClass('container-fluid');
     $('#swh-web-content').addClass('container');
   }
   localStorage.setItem('swh-web-full-width', JSON.stringify(fullWidth));
   $('#swh-full-width-switch').prop('checked', fullWidth);
 }
 
 export function fullWidthToggled(event) {
   setFullWidth($(event.target).prop('checked'));
 }
 
 export function setContainerFullWidth() {
   let previousFullWidthState = JSON.parse(localStorage.getItem('swh-web-full-width'));
   if (previousFullWidthState !== null) {
     setFullWidth(previousFullWidthState);
   }
 }
+
+export async function validateSWHIDInput(swhidInputElt) {
+  const swhidInput = swhidInputElt.value.trim();
+  let customValidity = '';
+  if (swhidInput.startsWith('swh:')) {
+    const resolveSWHIDUrl = Urls.api_1_resolve_swhid(swhidInput);
+    const response = await fetch(resolveSWHIDUrl);
+    const responseData = await response.json();
+    if (responseData.hasOwnProperty('exception')) {
+      customValidity = responseData.reason;
+    }
+  }
+  swhidInputElt.setCustomValidity(customValidity);
+  $(swhidInputElt).siblings('.invalid-feedback').text(customValidity);
+}
diff --git a/assets/src/bundles/webapp/webapp.css b/assets/src/bundles/webapp/webapp.css
index f570d3f2..2a6f7793 100644
--- a/assets/src/bundles/webapp/webapp.css
+++ b/assets/src/bundles/webapp/webapp.css
@@ -1,701 +1,705 @@
 /**
- * Copyright (C) 2018-2020  The Software Heritage developers
+ * Copyright (C) 2018-2021  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 html {
     height: 100%;
     overflow-x: hidden;
     scroll-behavior: auto !important;
 }
 
 body {
     min-height: 100%;
     margin: 0;
     position: relative;
     padding-bottom: 120px;
 }
 
 a:active,
 a.active {
     outline: none;
 }
 
 code {
     background-color: #f9f2f4;
 }
 
 pre code {
     background-color: transparent;
 }
 
 footer {
     background-color: #262626;
     color: #fff;
     font-size: 0.8rem;
     position: absolute;
     bottom: 0;
     width: 100%;
     padding-top: 20px;
     padding-bottom: 20px;
 }
 
 footer a,
 footer a:visited,
 footer a:hover {
     color: #fecd1b;
 }
 
 footer a:hover {
     text-decoration: underline;
 }
 
 .link-color {
     color: #fecd1b;
 }
 
 pre {
     background-color: #f5f5f5;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 9.5px;
     font-size: 0.8rem;
 }
 
 .btn.active {
     background-color: #e7e7e7;
 }
 
 .card {
     margin-bottom: 5px !important;
     overflow-x: auto;
 }
 
 .navbar-brand {
     padding: 5px;
     margin-right: 0;
 }
 
 .table {
     margin-bottom: 0;
 }
 
 .swh-table thead {
     background-color: #f2f4f5;
     border-top: 1px solid rgba(0, 0, 0, 0.2);
     font-weight: normal;
 }
 
 .swh-table-striped th {
     border-top: none;
 }
 
 .swh-table-striped tbody tr:nth-child(even) {
     background-color: #f2f4f5;
 }
 
 .swh-table-striped tbody tr:nth-child(odd) {
     background-color: #fff;
 }
 
 .swh-web-app-link a {
     text-decoration: none;
     border: none;
 }
 
 .swh-web-app-link:hover {
     background-color: #efeff2;
 }
 
 .table > thead > tr > th {
     border-top: none;
     border-bottom: 1px solid #e20026;
 }
 
 .table > tbody > tr > td {
     border-style: none;
 }
 
 .sitename .first-word,
 .sitename .second-word {
     color: rgba(0, 0, 0, 0.75);
     font-weight: normal;
     font-size: 1.2rem;
 }
 
 .sitename .first-word {
     font-family: 'Alegreya Sans', sans-serif;
 }
 
 .sitename .second-word {
     font-family: 'Alegreya', serif;
 }
 
 .swh-counter {
     font-size: 150%;
 }
 
 @media (max-width: 600px) {
     .swh-counter-container {
         margin-top: 1rem;
     }
 }
 
 .swh-http-error {
     margin: 0 auto;
     text-align: center;
 }
 
 .swh-http-error-head {
     color: #2d353c;
     font-size: 30px;
 }
 
 .swh-http-error-code {
     bottom: 60%;
     color: #2d353c;
     font-size: 96px;
     line-height: 80px;
     margin-bottom: 10px !important;
 }
 
 .swh-http-error-desc {
     font-size: 12px;
     color: #647788;
     text-align: center;
 }
 
 .swh-http-error-desc pre {
     display: inline-block;
     text-align: left;
     max-width: 800px;
     white-space: pre-wrap;
 }
 
 .swh-list-unstyled {
     list-style: none;
 }
 
 .popover {
     max-width: 97%;
     z-index: 40000;
 }
 
 .modal {
     text-align: center;
     padding: 0 !important;
     z-index: 50000;
 }
 
 .modal::before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     margin-right: -4px;
 }
 
 .modal-dialog {
     display: inline-block;
     text-align: left;
     vertical-align: middle;
 }
 
 .dropdown-submenu {
     position: relative;
 }
 
 .dropdown-submenu .dropdown-menu {
     top: 0;
     left: -100%;
     margin-top: -5px;
     margin-left: -2px;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
 a.dropdown-left::before {
     content: "\f035e";
     font-family: 'Material Design Icons';
     display: block;
     width: 20px;
     height: 20px;
     float: left;
     margin-left: 0;
 }
 
 #swh-navbar {
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
     border-bottom-style: solid;
     border-bottom-width: 5px;
     border-image: linear-gradient(to right, rgb(226, 0, 38) 0%, rgb(254, 205, 27) 100%) 1 1 1 1;
     width: 100%;
     padding: 5px;
     margin-bottom: 10px;
     margin-top: 30px;
     justify-content: normal;
     flex-wrap: nowrap;
     height: 72px;
     overflow: hidden;
 }
 
 #back-to-top {
     display: none;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 10;
 }
 
 #back-to-top a img {
     display: block;
     width: 32px;
     height: 32px;
     background-size: 32px 32px;
     text-indent: -999px;
     overflow: hidden;
 }
 
 .swh-top-bar {
     direction: ltr;
     height: 30px;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99999;
     background-color: #262626;
     color: #fff;
     text-align: center;
     font-size: 14px;
 }
 
 .swh-top-bar ul {
     margin-top: 4px;
     padding-left: 0;
     white-space: nowrap;
 }
 
 .swh-top-bar li {
     display: inline-block;
     margin-left: 10px;
     margin-right: 10px;
 }
 
 .swh-top-bar a,
 .swh-top-bar a:visited {
     color: white;
 }
 
 .swh-top-bar a.swh-current-site,
 .swh-top-bar a.swh-current-site:visited {
     color: #fecd1b;
 }
 
 .swh-position-left {
     position: absolute;
     left: 0;
 }
 
 .swh-position-right {
     position: absolute;
     right: 0;
 }
 
 .swh-background-gray {
     background: #efeff2;
 }
 
 .swh-donate-link {
     border: 1px solid #fecd1b;
     background-color: #e20026;
     color: white !important;
     padding: 3px;
     border-radius: 3px;
 }
 
 .swh-navbar-content h4 {
     padding-top: 7px;
 }
 
 .swh-navbar-content .bread-crumbs {
     display: block;
     margin-left: -40px;
 }
 
 .swh-navbar-content .bread-crumbs li.bc-no-root {
     padding-top: 7px;
 }
 
 .main-sidebar {
     margin-top: 30px;
 }
 
 .content-wrapper {
     background: none;
 }
 
 .brand-image {
     max-height: 40px;
 }
 
 .brand-link {
     padding-top: 18.5px;
     padding-bottom: 18px;
     padding-left: 4px;
     border-bottom: 5px solid #e20026 !important;
 }
 
 .navbar-header a,
 ul.dropdown-menu a,
 ul.navbar-nav a,
 ul.nav-sidebar a {
     border-bottom-style: none;
     color: #323232;
 }
 
 .swh-sidebar .nav-link.active {
     color: #323232 !important;
     background-color: #e7e7e7 !important;
 }
 
 .nav-tabs .nav-link.active {
     border-top: 3px solid #e20026;
 }
 
 .swh-image-error {
     width: 80px;
     height: auto;
 }
 
 @media (max-width: 600px) {
     .card {
         min-width: 80%;
     }
 
     .swh-image-error {
         width: 40px;
         height: auto;
     }
 
     .swh-donate-link {
         display: none;
     }
 }
 
 .form-check-label {
     padding-top: 4px;
 }
 
 .swhid {
     white-space: pre-wrap;
 }
 
 .swhid .swhid-option {
     display: inline-block;
     margin-right: 5px;
     line-height: 1rem;
 }
 
 .nav-pills .nav-link:not(.active):hover {
     color: rgba(0, 0, 0, 0.55);
 }
 
 .swh-heading-color {
     color: #e20026 !important;
 }
 
 .sidebar-mini.sidebar-collapse .main-sidebar:hover {
     width: 4.6rem;
 }
 
 .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info,
 .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
 .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text {
     visibility: hidden !important;
 }
 
 .sidebar .nav-link p,
 .main-sidebar .brand-text,
 .sidebar .user-panel .info {
     transition: none;
 }
 
 .sidebar-mini.sidebar-mini.sidebar-collapse .sidebar {
     padding-right: 0;
 }
 
 .swh-words-logo {
     position: absolute;
     top: 0;
     left: 0;
     width: 73px;
     height: 73px;
     text-align: center;
     font-size: 10pt;
     color: rgba(0, 0, 0, 0.75);
 }
 
 .swh-words-logo:hover {
     text-decoration: none;
 }
 
 .swh-words-logo-swh {
     line-height: 1;
     padding-top: 13px;
     visibility: hidden;
 }
 
 hr.swh-faded-line {
     border: 0;
     height: 1px;
     background-image: linear-gradient(to left, #f0f0f0, #8c8b8b, #f0f0f0);
 }
 
 /* Ensure that section title with link is colored like standard section title */
 .swh-readme h1 a,
 .swh-readme h2 a,
 .swh-readme h3 a,
 .swh-readme h4 a,
 .swh-readme h5 a,
 .swh-readme h6 a {
     color: #e20026;
 }
 
 /* Make list compact in reStructuredText rendering */
 .swh-rst li p {
     margin-bottom: 0;
 }
 
 .swh-readme-txt pre {
     background: none;
     border: none;
 }
 
 .swh-coverage-col {
     padding-left: 10px;
     padding-right: 10px;
 }
 
 .swh-coverage {
     height: calc(65px + 1em);
     padding-top: 0.3rem;
     border: none;
 }
 
 .swh-coverage a {
     text-decoration: none;
 }
 
 .swh-coverage-logo {
     display: block;
     width: 100%;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     object-fit: contain;
 
     /* polyfill for old browsers, see https://github.com/bfred-it/object-fit-images */
     font-family: 'object-fit: contain;';
 }
 
 .swh-coverage-list {
     width: 100%;
     height: 320px;
     border: none;
 }
 
 tr.swh-tr-hover-highlight:hover td {
     background: #ededed;
 }
 
 tr.swh-api-doc-route a {
     text-decoration: none;
 }
 
 .swh-apidoc .col {
     margin: 10px;
 }
 
 .swh-apidoc .swh-rst blockquote {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
 a.toggle-col {
     text-decoration: none;
 }
 
 a.toggle-col.col-hidden {
     text-decoration: line-through;
 }
 
 .admonition.warning {
     background: #fcf8e3;
     border: 1px solid #faebcc;
     padding: 15px;
     border-radius: 4px;
 }
 
 .admonition.warning p {
     margin-bottom: 0;
 }
 
 .admonition.warning .first {
     font-size: 1.5rem;
 }
 
 .swh-popover {
     max-height: 50vh;
     overflow-y: auto;
     overflow-x: auto;
     padding: 0;
 }
 
 @media screen and (min-width: 768px) {
     .swh-popover {
         max-width: 50vw;
     }
 }
 
 .swh-popover pre {
     white-space: pre-wrap;
     margin-bottom: 0;
 }
 
 .d3-wrapper {
     position: relative;
     height: 0;
     width: 100%;
     padding: 0;
 
     /* padding-bottom will be overwritten by JavaScript later */
     padding-bottom: 100%;
 }
 
 .d3-wrapper > svg {
     position: absolute;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
 }
 
 div.d3-tooltip {
     position: absolute;
     text-align: center;
     width: auto;
     height: auto;
     padding: 2px;
     font: 12px sans-serif;
     background: white;
     border: 1px solid black;
     border-radius: 4px;
     pointer-events: none;
 }
 
 .page-link {
     cursor: pointer;
 }
 
 .wrapper {
     overflow: hidden;
 }
 
 .swh-badge {
     padding-bottom: 1rem;
     cursor: pointer;
 }
 
 .swh-badge-html,
 .swh-badge-md,
 .swh-badge-rst {
     white-space: pre-wrap;
 }
 
 /* Material Design icons alignment tweaks */
 
 .mdi {
     display: inline-block;
 }
 
 .mdi-camera {
     transform: translateY(1px);
 }
 
 .mdi-source-commit {
     transform: translateY(2px);
 }
 
 /* To set icons at a fixed width. Great to use when different
    icon widths throw off alignment. Courtesy of Font Awesome. */
 .mdi-fw {
     text-align: center;
     width: 1.25em;
 }
 
 .main-header .nav-link {
     height: inherit;
 }
 
 .nav-sidebar .nav-header:not(:first-of-type) {
     padding-top: 1rem;
 }
 
 .nav-sidebar .nav-link {
     padding-top: 0;
     padding-bottom: 0;
 }
 
 .nav-sidebar > .nav-item .nav-icon {
     vertical-align: sub;
 }
 
 .swh-search-icon {
     line-height: 1rem;
     vertical-align: middle;
 }
 
 .swh-search-navbar {
     position: absolute;
     top: 0.7rem;
     right: 15rem;
     z-index: 50000;
     width: 500px;
 }
 
 .sidebar-collapse .swh-search-navbar {
     right: 4rem;
 }
 
 .swh-corner-ribbon {
     width: 200px;
     background: #fecd1b;
     color: #e20026;
     position: absolute;
     text-align: center;
     line-height: 50px;
     letter-spacing: 1px;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
     top: 55px;
     right: -50px;
     left: auto;
     transform: rotate(45deg);
     z-index: 2000;
 }
 
 @media screen and (max-width: 600px) {
     .swh-corner-ribbon {
         line-height: 30px;
         top: 53px;
         right: -65px;
     }
 }
+
+.invalid-feedback {
+    font-size: 100%;
+}
diff --git a/cypress/integration/origin-search.spec.js b/cypress/integration/origin-search.spec.js
index 42a43736..1b5b0164 100644
--- a/cypress/integration/origin-search.spec.js
+++ b/cypress/integration/origin-search.spec.js
@@ -1,503 +1,537 @@
 /**
  * Copyright (C) 2019-2021  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 const nonExistentText = 'NoMatchExists';
 
 let origin;
 let url;
 
-function doSearch(searchText) {
-  cy.get('#swh-origins-url-patterns')
-    .type(searchText)
+function doSearch(searchText, searchInputElt = '#swh-origins-url-patterns') {
+  if (searchText.startsWith('swh:')) {
+    cy.intercept('**/api/1/resolve/**')
+      .as('swhidResolve');
+  }
+  cy.get(searchInputElt)
+    // to avoid sending too much SWHID validation requests
+    // as cypress insert character one by one when using type
+    .invoke('val', searchText.slice(0, -1))
+    .type(searchText.slice(-1))
     .get('.swh-search-icon')
     .click();
+  if (searchText.startsWith('swh:')) {
+    cy.wait('@swhidResolve');
+  }
 }
 
 function searchShouldRedirect(searchText, redirectUrl) {
   doSearch(searchText);
   cy.location('pathname')
     .should('equal', redirectUrl);
 }
 
 function searchShouldShowNotFound(searchText, msg) {
   doSearch(searchText);
-  cy.get('#swh-no-result')
-    .should('be.visible')
-    .and('contain', msg);
+  if (searchText.startsWith('swh:')) {
+    cy.get('.invalid-feedback')
+      .should('be.visible')
+      .and('contain', msg);
+  }
 }
 
 function stubOriginVisitLatestRequests(status = 200, response = {type: 'tar'}, aliasSuffix = '') {
   cy.intercept({url: '**/visit/latest/**'}, {
     body: response,
     statusCode: status
   }).as(`originVisitLatest${aliasSuffix}`);
 }
 
 describe('Test origin-search', function() {
   before(function() {
     origin = this.origin[0];
     url = this.Urls.browse_search();
   });
 
   beforeEach(function() {
     cy.visit(url);
   });
 
   it('should have focus on search form after page load', function() {
     cy.get('#swh-origins-url-patterns')
       .should('have.attr', 'autofocus');
     // for some reason, autofocus is not honored when running cypress tests
     // while it is in non controlled browsers
     // .should('have.focus');
   });
 
   it('should show in result when url is searched', function() {
     cy.get('#swh-origins-url-patterns')
       .type(origin.url);
     cy.get('.swh-search-icon')
       .click();
 
     cy.get('#origin-search-results')
       .should('be.visible');
     cy.contains('tr', origin.url)
       .should('be.visible')
       .find('.swh-visit-status')
       .find('i')
       .should('have.class', 'mdi-check-bold')
       .and('have.attr', 'title',
            'Software origin has been archived by Software Heritage');
 
     const browseOriginUrl = `${this.Urls.browse_origin()}?origin_url=${encodeURIComponent(origin.url)}`;
     cy.get('tr a')
       .should('have.attr', 'href', browseOriginUrl);
   });
 
   it('should remove origin URL with no archived content', function() {
     stubOriginVisitLatestRequests(404);
 
     cy.get('#swh-origins-url-patterns')
       .type(origin.url);
     cy.get('.swh-search-icon')
       .click();
 
     cy.wait('@originVisitLatest');
 
     cy.get('#origin-search-results')
       .should('be.visible')
       .find('tbody tr').should('have.length', 0);
 
     stubOriginVisitLatestRequests(200, {}, '2');
 
     cy.get('.swh-search-icon')
       .click();
 
     cy.wait('@originVisitLatest2');
 
     cy.get('#origin-search-results')
       .should('be.visible')
       .find('tbody tr').should('have.length', 0);
 
   });
 
   it('should filter origins by visit type', function() {
     cy.intercept('**/visit/latest/**').as('checkOriginVisits');
     cy.get('#swh-origins-url-patterns')
       .type('http');
 
     for (let visitType of ['git', 'tar']) {
       cy.get('#swh-search-visit-type')
         .select(visitType);
 
       cy.get('.swh-search-icon')
         .click();
 
       cy.wait('@checkOriginVisits');
 
       cy.get('#origin-search-results')
         .should('be.visible');
 
       cy.get('tbody tr td.swh-origin-visit-type').then(elts => {
         for (let elt of elts) {
           cy.get(elt).should('have.text', visitType);
         }
       });
     }
   });
 
   it('should show not found message when no repo matches', function() {
     searchShouldShowNotFound(nonExistentText,
                              'No origins matching the search criteria were found.');
   });
 
   it('should add appropriate URL parameters', function() {
     // Check all three checkboxes and check if
     // correct url params are added
     cy.get('#swh-search-origins-with-visit')
       .check({force: true})
       .get('#swh-filter-empty-visits')
       .check({force: true})
       .get('#swh-search-origin-metadata')
       .check({force: true})
       .then(() => {
         const searchText = origin.url;
         doSearch(searchText);
         cy.location('search').then(locationSearch => {
           const urlParams = new URLSearchParams(locationSearch);
           const query = urlParams.get('q');
           const withVisit = urlParams.has('with_visit');
           const withContent = urlParams.has('with_content');
           const searchMetadata = urlParams.has('search_metadata');
 
           assert.strictEqual(query, searchText);
           assert.strictEqual(withVisit, true);
           assert.strictEqual(withContent, true);
           assert.strictEqual(searchMetadata, true);
         });
       });
   });
 
   it('should search in origin intrinsic metadata', function() {
     cy.intercept('GET', '**/origin/metadata-search/**').as(
       'originMetadataSearch'
     );
     cy.get('#swh-search-origins-with-visit')
       .check({force: true})
       .get('#swh-filter-empty-visits')
       .check({force: true})
       .get('#swh-search-origin-metadata')
       .check({force: true})
       .then(() => {
         const searchText = 'plugin';
         doSearch(searchText);
         console.log(searchText);
         cy.wait('@originMetadataSearch').then((req) => {
           expect(req.response.body[0].metadata.metadata.description).to.equal(
             'Line numbering plugin for Highlight.js'
             // metadata is defined in _TEST_ORIGINS variable in swh/web/tests/data.py
           );
         });
       });
   });
 
   it('should not send request to the resolve endpoint', function() {
     cy.intercept(`${this.Urls.api_1_resolve_swhid('').slice(0, -1)}**`)
       .as('resolveSWHID');
 
     cy.intercept(`${this.Urls.api_1_origin_search(origin.url)}**`)
       .as('searchOrigin');
 
     cy.get('#swh-origins-url-patterns')
       .type(origin.url);
 
     cy.get('.swh-search-icon')
       .click();
 
     cy.wait('@searchOrigin');
 
     cy.xhrShouldBeCalled('resolveSWHID', 0);
     cy.xhrShouldBeCalled('searchOrigin', 1);
   });
 
   context('Test pagination', function() {
     it('should not paginate if there are not many results', function() {
       // Setup search
       cy.get('#swh-search-origins-with-visit')
         .uncheck({force: true})
         .get('#swh-filter-empty-visits')
         .uncheck({force: true})
         .then(() => {
           const searchText = 'libtess';
 
           // Get first page of results
           doSearch(searchText);
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 1);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://github.com/memononen/libtess2');
 
           cy.get('#origins-prev-results-button')
             .should('have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('have.class', 'disabled');
         });
     });
 
     it('should paginate forward when there are many results', function() {
       stubOriginVisitLatestRequests();
       // Setup search
       cy.get('#swh-search-origins-with-visit')
         .uncheck({force: true})
         .get('#swh-filter-empty-visits')
         .uncheck({force: true})
         .then(() => {
           const searchText = 'many.origins';
 
           // Get first page of results
           doSearch(searchText);
           cy.wait('@originVisitLatest');
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 100);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://many.origins/1');
           cy.get('.swh-search-result-entry#origin-99 td a')
             .should('have.text', 'https://many.origins/100');
 
           cy.get('#origins-prev-results-button')
             .should('have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get second page of results
           cy.get('#origins-next-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 100);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://many.origins/101');
           cy.get('.swh-search-result-entry#origin-99 td a')
             .should('have.text', 'https://many.origins/200');
 
           cy.get('#origins-prev-results-button')
             .should('not.have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get third (and last) page of results
           cy.get('#origins-next-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 50);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://many.origins/201');
           cy.get('.swh-search-result-entry#origin-49 td a')
             .should('have.text', 'https://many.origins/250');
 
           cy.get('#origins-prev-results-button')
             .should('not.have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('have.class', 'disabled');
         });
     });
 
     it('should paginate backward from a middle page', function() {
       stubOriginVisitLatestRequests();
       // Setup search
       cy.get('#swh-search-origins-with-visit')
         .uncheck({force: true})
         .get('#swh-filter-empty-visits')
         .uncheck({force: true})
         .then(() => {
           const searchText = 'many.origins';
 
           // Get first page of results
           doSearch(searchText);
           cy.wait('@originVisitLatest');
 
           cy.get('#origins-prev-results-button')
             .should('have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get second page of results
           cy.get('#origins-next-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('#origins-prev-results-button')
             .should('not.have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get first page of results again
           cy.get('#origins-prev-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 100);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://many.origins/1');
           cy.get('.swh-search-result-entry#origin-99 td a')
             .should('have.text', 'https://many.origins/100');
 
           cy.get('#origins-prev-results-button')
             .should('have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
         });
     });
 
     it('should paginate backward from the last page', function() {
       stubOriginVisitLatestRequests();
       // Setup search
       cy.get('#swh-search-origins-with-visit')
         .uncheck({force: true})
         .get('#swh-filter-empty-visits')
         .uncheck({force: true})
         .then(() => {
           const searchText = 'many.origins';
 
           // Get first page of results
           doSearch(searchText);
           cy.wait('@originVisitLatest');
 
           cy.get('#origins-prev-results-button')
             .should('have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get second page of results
           cy.get('#origins-next-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('#origins-prev-results-button')
             .should('not.have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get third (and last) page of results
           cy.get('#origins-next-results-button a')
             .click();
 
           cy.get('#origins-prev-results-button')
             .should('not.have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('have.class', 'disabled');
 
           // Get second page of results again
           cy.get('#origins-prev-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 100);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://many.origins/101');
           cy.get('.swh-search-result-entry#origin-99 td a')
             .should('have.text', 'https://many.origins/200');
 
           cy.get('#origins-prev-results-button')
             .should('not.have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
 
           // Get first page of results again
           cy.get('#origins-prev-results-button a')
             .click();
           cy.wait('@originVisitLatest');
 
           cy.get('.swh-search-result-entry')
             .should('have.length', 100);
 
           cy.get('.swh-search-result-entry#origin-0 td a')
             .should('have.text', 'https://many.origins/1');
           cy.get('.swh-search-result-entry#origin-99 td a')
             .should('have.text', 'https://many.origins/100');
 
           cy.get('#origins-prev-results-button')
             .should('have.class', 'disabled');
           cy.get('#origins-next-results-button')
             .should('not.have.class', 'disabled');
         });
     });
   });
 
   context('Test valid SWHIDs', function() {
     it('should resolve directory', function() {
       const redirectUrl = this.Urls.browse_directory(origin.content[0].directory);
       const swhid = `swh:1:dir:${origin.content[0].directory}`;
 
       searchShouldRedirect(swhid, redirectUrl);
     });
 
     it('should resolve revision', function() {
       const redirectUrl = this.Urls.browse_revision(origin.revisions[0]);
       const swhid = `swh:1:rev:${origin.revisions[0]}`;
 
       searchShouldRedirect(swhid, redirectUrl);
     });
 
     it('should resolve snapshot', function() {
       const redirectUrl = this.Urls.browse_snapshot_directory(origin.snapshot);
       const swhid = `swh:1:snp:${origin.snapshot}`;
 
       searchShouldRedirect(swhid, redirectUrl);
     });
 
     it('should resolve content', function() {
       const redirectUrl = this.Urls.browse_content(`sha1_git:${origin.content[0].sha1git}`);
       const swhid = `swh:1:cnt:${origin.content[0].sha1git}`;
 
       searchShouldRedirect(swhid, redirectUrl);
     });
 
     it('should not send request to the search endpoint', function() {
       const swhid = `swh:1:rev:${origin.revisions[0]}`;
 
       cy.intercept(this.Urls.api_1_resolve_swhid(swhid))
         .as('resolveSWHID');
 
       cy.intercept(`${this.Urls.api_1_origin_search('').slice(0, -1)}**`)
         .as('searchOrigin');
 
       cy.get('#swh-origins-url-patterns')
         .type(swhid);
 
       cy.get('.swh-search-icon')
         .click();
 
       cy.wait('@resolveSWHID');
 
       cy.xhrShouldBeCalled('resolveSWHID', 1);
       cy.xhrShouldBeCalled('searchOrigin', 0);
     });
   });
 
   context('Test invalid SWHIDs', function() {
     it('should show not found for directory', function() {
       const swhid = `swh:1:dir:${this.unarchivedRepo.rootDirectory}`;
       const msg = `Directory with sha1_git ${this.unarchivedRepo.rootDirectory} not found`;
 
       searchShouldShowNotFound(swhid, msg);
     });
 
     it('should show not found for snapshot', function() {
       const swhid = `swh:1:snp:${this.unarchivedRepo.snapshot}`;
       const msg = `Snapshot with id ${this.unarchivedRepo.snapshot} not found!`;
 
       searchShouldShowNotFound(swhid, msg);
     });
 
     it('should show not found for revision', function() {
       const swhid = `swh:1:rev:${this.unarchivedRepo.revision}`;
       const msg = `Revision with sha1_git ${this.unarchivedRepo.revision} not found.`;
 
       searchShouldShowNotFound(swhid, msg);
     });
 
     it('should show not found for content', function() {
       const swhid = `swh:1:cnt:${this.unarchivedRepo.content[0].sha1git}`;
       const msg = `Content with sha1_git checksum equals to ${this.unarchivedRepo.content[0].sha1git} not found!`;
 
       searchShouldShowNotFound(swhid, msg);
     });
+
+    function checkInvalidSWHIDReport(url, searchInputElt, repoData) {
+      const invalidSWHID = `swh:1:cnt:${repoData.content[0].sha1git};lines=45-60/`;
+      cy.visit(url);
+      doSearch(invalidSWHID, searchInputElt);
+      cy.get(searchInputElt)
+        .then($el => $el[0].checkValidity()).should('be.false');
+      cy.get(searchInputElt)
+        .invoke('prop', 'validationMessage')
+        .should('not.equal', '');
+
+    }
+
+    it('should report invalid SWHID in search page input', function() {
+      checkInvalidSWHIDReport(this.Urls.browse_search(), '#swh-origins-url-patterns', this.unarchivedRepo);
+      cy.get('.invalid-feedback')
+        .should('be.visible');
+    });
+
+    it('should report invalid SWHID in top right search input', function() {
+      checkInvalidSWHIDReport(this.Urls.browse_help(), '#swh-origins-search-top-input', this.unarchivedRepo);
+    });
   });
 
 });
diff --git a/swh/web/templates/includes/origin-search-form.html b/swh/web/templates/includes/origin-search-form.html
index c9e29bd8..0c48f44f 100644
--- a/swh/web/templates/includes/origin-search-form.html
+++ b/swh/web/templates/includes/origin-search-form.html
@@ -1,53 +1,55 @@
 {% comment %}
-Copyright (C) 2020  The Software Heritage developers
+Copyright (C) 2020-2021  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
-<form class="form-horizontal" id="swh-search-origins">
+<form class="form-horizontal needs-validation" id="swh-search-origins" novalidate>
   <div class="input-group">
     <input class="form-control"
            placeholder="Enter a SWHID to resolve or string pattern(s) to search for in origin urls"
-           type="text" id="swh-origins-url-patterns" autofocus>
+           type="text" id="swh-origins-url-patterns"
+           oninput="swh.webapp.validateSWHIDInput(this)" autofocus required>
     <div class="input-group-append">
       <button class="btn btn-primary" type="submit"><i class="swh-search-icon mdi mdi-24px mdi-magnify" aria-hidden="true"></i></button>
     </div>
+    <div class="invalid-feedback"></div>
   </div>
   <div class="row mt-1 mb-1 float-right position-relative" style="z-index: 1000">
     <div class="form-group form-inline">
       <label class="control-label mr-1" style="font-weight: inherit">visit type:</label>
       <select id="swh-search-visit-type" class="custom-select form-control custom-select-sm">
         <option selected value="any">any</option>
         {% for visit_type in visit_types %}
           <option value="{{ visit_type }}">{{ visit_type }}</option>
         {% endfor %}
       </select>
     </div>
   </div>
   <div class="custom-control custom-checkbox swhid-option">
     <input class="custom-control-input" value="option-origins-with-visit" type="checkbox"
           id="swh-search-origins-with-visit" checked>
     <label class="custom-control-label font-weight-normal" for="swh-search-origins-with-visit">
       only show origins visited at least once
     </label>
   </div>
   <div class="custom-control custom-checkbox swhid-option">
     <input class="custom-control-input" value="option-filter-empty-visits" type="checkbox"
           id="swh-filter-empty-visits" checked>
     <label class="custom-control-label font-weight-normal" for="swh-filter-empty-visits">
       filter out origins with no archived content
     </label>
   </div>
   <div class="custom-control custom-checkbox swhid-option">
     <input class="custom-control-input" value="option-filter-empty-visits" type="checkbox"
           id="swh-search-origin-metadata">
     <label class="custom-control-label font-weight-normal" for="swh-search-origin-metadata">
       search in metadata (instead of URL)
     </label>
   </div>
 </form>
 
 <script>
   swh.browse.initOriginSearch();
 </script>
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
index 6673686b..7775b992 100644
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -1,275 +1,276 @@
 {% comment %}
-Copyright (C) 2015-2020  The Software Heritage developers
+Copyright (C) 2015-2021  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 <!DOCTYPE html>
 
 {% load js_reverse %}
 {% load static %}
 {% load render_bundle from webpack_loader %}
 {% load swh_templatetags %}
 
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>{% block title %}{% endblock %}</title>
 
     {% render_bundle 'vendors' %}
     {% render_bundle 'webapp' %}
 
     <script>
 /*
 @licstart  The following is the entire license notice for the JavaScript code in this page.
 
-Copyright (C) 2015-2020  The Software Heritage developers
+Copyright (C) 2015-2021  The Software Heritage developers
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 @licend  The above is the entire license notice for the JavaScript code in this page.
 */
     </script>
 
     <script>
       SWH_CONFIG = {{swh_client_config|jsonify}};
       swh.webapp.sentryInit(SWH_CONFIG.sentry_dsn);
     </script>
 
     <script src="{% url 'js_reverse' %}" type="text/javascript"></script>
 
     <script>
       swh.webapp.setSwhObjectIcons({{ swh_object_icons|jsonify }});
     </script>
 
     {% block header %}{% endblock %}
 
     <link rel="icon" href="{% static 'img/icons/swh-logo-32x32.png' %}" sizes="32x32" />
     <link rel="icon" href="{% static 'img/icons/swh-logo-archive-192x192.png' %}" sizes="192x192" />
     <link rel="apple-touch-icon-precomposed" href="{% static 'img/icons/swh-logo-archive-180x180.png' %}" />
     <link rel="search" type="application/opensearchdescription+xml" title="Software Heritage archive of public source code" href="{% static 'xml/swh-opensearch.xml' %}">
     <meta name="msapplication-TileImage" content="{% static 'img/icons/swh-logo-archive-270x270.png' %}" />
 
     {% if "production" in DJANGO_SETTINGS_MODULE  %}
 
       <!-- Matomo -->
       <script type="text/javascript">
         var _paq = window._paq = window._paq || [];
         _paq.push(['trackPageView']);
         (function() {
           var u="https://piwik.inria.fr/";
           _paq.push(['setTrackerUrl', u+'matomo.php']);
           _paq.push(['setSiteId', '59']);
           var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
           g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
         })();
       </script>
       <!-- End Matomo Code -->
 
     {% endif %}
 
   </head>
 
   <body class="hold-transition layout-fixed sidebar-mini">
     <a id="top"></a>
     <div class="wrapper">
       <div class="swh-top-bar">
         <ul>
           <li class="swh-position-left">
             <div id="swh-full-width-switch-container" class="custom-control custom-switch d-none d-lg-block d-xl-block">
               <input type="checkbox" class="custom-control-input" id="swh-full-width-switch" onclick="swh.webapp.fullWidthToggled(event)">
               <label class="custom-control-label font-weight-normal" for="swh-full-width-switch">Full width</label>
             </div>
           </li>
           <li>
             <a href="https://www.softwareheritage.org">Home</a>
           </li>
           <li>
             <a href="https://forge.softwareheritage.org/">Development</a>
           </li>
           <li>
             <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
           </li>
           <li>
             <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
           </li>
           <li class="swh-position-right">
             <a href="{{ status.server_url }}" target="_blank"
               class="swh-current-status mr-3 d-none d-lg-inline-block d-xl-inline-block">
               <span id="swh-current-status-description">Operational</span>
               <i class="swh-current-status-indicator green"></i>
             </a>
             {% url 'logout' as logout_url %}
             {% if user.is_authenticated %}
               Logged in as
               {% if 'OIDC' in user.backend %}
                 <a href="{% url 'oidc-profile' %}"><strong>{{ user.username }}</strong></a>,
                 <a href="{% url 'oidc-logout' %}?next_path={% url 'logout' %}?remote_user=1">logout</a>
               {% else %}
                 <strong>{{ user.username }}</strong>,
                 <a href="{{ logout_url }}">logout</a>
               {% endif %}
             {% elif oidc_enabled %}
               {% if request.path != logout_url %}
                 <a href="{% url 'oidc-login' %}?next_path={{ request.build_absolute_uri }}">login</a>
               {% else %}
                 <a href="{% url 'oidc-login' %}">login</a>
               {% endif %}
             {% else %}
               {% if request.path != logout_url %}
                 <a href="{% url 'login' %}?next={{ request.build_absolute_uri }}">login</a>
               {% else %}
                 <a href="{% url 'login' %}">login</a>
               {% endif %}
             {% endif %}
           </li>
         </ul>
       </div>
       <nav class="main-header navbar navbar-expand-lg navbar-light navbar-static-top" id="swh-navbar">
         <div class="navbar-header">
           <a class="nav-link swh-push-menu" data-widget="pushmenu" data-enable-remember="true" href="#">
             <i class="mdi mdi-24px mdi-menu mdi-fw" aria-hidden="true"></i>
           </a>
         </div>
         <div class="navbar" style="width: 94%;">
           <div class="swh-navbar-content">
             {% block navbar-content %}{% endblock %}
             {% if request.resolver_match.url_name != 'swh-web-homepage' and request.resolver_match.url_name != 'browse-search' %}
-              <form class="form-horizontal d-none d-md-flex input-group swh-search-navbar"
+              <form class="form-horizontal d-none d-md-flex input-group swh-search-navbar needs-validation"
                   id="swh-origins-search-top">
                 <input class="form-control"
                   placeholder="Enter a SWHID to resolve or keyword(s) to search for in origin URLs"
-                  type="text" id="swh-origins-search-top-input"/>
+                  type="text" id="swh-origins-search-top-input"
+                  oninput="swh.webapp.validateSWHIDInput(this)" required/>
                 <div class="input-group-append">
                   <button class="btn btn-primary" type="submit">
                   <i class="swh-search-icon mdi mdi-24px mdi-magnify" aria-hidden="true"></i>
                   </button>
                 </div>
               </form>
             {% endif %}
           </div>
         </div>
       </nav>
     </div>
 
     <aside class="swh-sidebar main-sidebar sidebar-no-expand sidebar-light-primary elevation-4">
       <a href="{% url 'swh-web-homepage' %}" class="brand-link">
         <img class="brand-image" src="{% static 'img/swh-logo.png' %}">
         <div class="brand-text sitename" href="{% url 'swh-web-homepage' %}">
           <span class="first-word">Software</span> <span class="second-word">Heritage</span>
         </div>
       </a>
 
       <a href="/" class="swh-words-logo">
         <div class="swh-words-logo-swh">
           <span class="first-word">Software</span>
           <span class="second-word">Heritage</span>
         </div>
         <span>Archive</span>
       </a>
 
       <div class="sidebar">
         <nav class="mt-2">
           <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
             <li class="nav-header">Features</li>
             <li class="nav-item swh-search-item" title="Search archived software">
               <a href="{% url 'browse-search' %}" class="nav-link swh-search-link">
                 <i style="color: #e20026;" class="nav-icon mdi mdi-24px mdi-magnify"></i>
                 <p>Search</p>
               </a>
             </li>
             <li class="nav-item swh-vault-item" title="Download archived software from the Vault">
               <a href="{% url 'browse-vault' %}" class="nav-link swh-vault-link">
                 <i style="color: #e20026;" class="nav-icon mdi mdi-24px mdi-download"></i>
                 <p>Downloads</p>
               </a>
             </li>
             <li class="nav-item swh-origin-save-item" title="Request the saving of a software origin into the archive">
               <a href="{% url 'origin-save' %}" class="nav-link swh-origin-save-link">
                 <i style="color: #e20026;" class="nav-icon mdi mdi-24px mdi-camera"></i>
                 <p>Save code now</p>
               </a>
             </li>
             <li class="nav-item swh-help-item" title="How to browse the archive ?">
               <a href="{% url 'browse-help' %}" class="nav-link swh-help-link">
                 <i style="color: #e20026;" class="nav-icon mdi mdi-24px mdi-help-circle"></i>
                 <p>Help</p>
               </a>
             </li>
             {% if user.is_authenticated  and user.is_staff %}
               <li class="nav-header">Administration</li>
               <li class="nav-item swh-origin-save-admin-item" title="Save code now administration">
                 <a href="{% url 'admin-origin-save' %}" class="nav-link swh-origin-save-admin-link">
                   <i style="color: #fecd1b;" class="nav-icon mdi mdi-24px mdi-camera"></i>
                   <p>Save code now</p>
                 </a>
               </li>
               <li class="nav-item swh-deposit-admin-item" title="Deposit administration">
                 <a href="{% url 'admin-deposit' %}" class="nav-link swh-deposit-admin-link">
                   <i style="color: #fecd1b;" class="nav-icon mdi mdi-24px mdi-folder-upload"></i>
                   <p>Deposit</p>
                 </a>
               </li>
             {% endif %}
           </ul>
         </nav>
       </div>
     </aside>
 
     <div class="content-wrapper">
       <section class="content">
         <div class="container" id="swh-web-content">
           {% if swh_web_staging %}
             <div class="swh-corner-ribbon">Staging</div>
           {% endif %}
           {% block content %}{% endblock %}
         </div>
       </section>
     </div>
 
     {% include "includes/global-modals.html" %}
 
     <footer class="footer">
       <div class="container text-center">
         <a href="https://www.softwareheritage.org">Software Heritage</a> &mdash;
         Copyright (C) 2015&ndash;{% now "Y" %}, The Software Heritage developers.
         License: <a href="https://www.gnu.org/licenses/agpl.html">GNU
         AGPLv3+</a>. <br /> The source code of Software Heritage <em>itself</em>
         is available on
         our <a href="https://forge.softwareheritage.org/">development
         forge</a>. <br /> The source code files <em>archived</em> by Software
         Heritage are available under their own copyright and licenses. <br />
         <span class="link-color">Terms of use: </span>
         <a href="https://www.softwareheritage.org/legal/bulk-access-terms-of-use/">Archive access</a>,
         <a href="https://www.softwareheritage.org/legal/api-terms-of-use/">API</a>-
         <a href="https://www.softwareheritage.org/contact/">Contact</a>-
         <a href="{% url 'jslicenses' %}" rel="jslicense">JavaScript license information</a>-
         <a href="{% url 'api-1-homepage' %}">Web API</a>
       </div>
     </footer>
     <div id="back-to-top">
       <a href="#top"><img alt="back to top" src="{% static 'img/arrow-up-small.png' %}" /></a>
     </div>
     <script>
       swh.webapp.setContainerFullWidth();
       var statusServerURL = {{ status.server_url|jsonify }};
       var statusJsonPath = {{ status.json_path|jsonify }};
       swh.webapp.initStatusWidget(statusServerURL + statusJsonPath);
     </script>
   </body>
 
 </html>