Add single-character author search frontend validation

openlibrary/templates/lib/nav_head.html

@@ -108,6 +108,101 @@
           >
           </a>
         </form>
+        <script>
+        (function(){
+          if (typeof window.setupSearchValidation !== 'function') {
+            window.setupSearchValidation = function setupSearchValidation(category, input, form) {
+              if (!input) return;
+
+              var activeCategory = category;
+
+              function isRestrictedCategory() {
+                return activeCategory === 'author' || activeCategory === 'authors';
+              }
+
+              function updateValidation() {
+                if (isRestrictedCategory()) {
+                  input.setAttribute('minlength', '2');
+                  input.setAttribute('pattern', '.*\\S.*\\S.*');
+                } else {
+                  input.removeAttribute('minlength');
+                  input.removeAttribute('pattern');
+                  input.setCustomValidity('');
+                }
+              }
+
+              if (!input._searchValidationListenersBound) {
+                input.addEventListener('invalid', function () {
+                  if (!isRestrictedCategory()) {
+                    input.setCustomValidity('');
+                    return;
+                  }
+
+                  if (input.validity.patternMismatch) {
+                    input.setCustomValidity('Please enter at least 2 characters');
+                  } else {
+                    input.setCustomValidity('');
+                  }
+                });
+
+                input.addEventListener('input', function () {
+                  input.setCustomValidity('');
+                });
+
+                input._searchValidationListenersBound = true;
+              }
+
+              updateValidation();
+
+              if (form && !form._searchValidationSubmitBound) {
+                form.addEventListener('submit', function(e){
+                  if (isRestrictedCategory() && !input.checkValidity()) {
+                    e.preventDefault();
+                    if (typeof input.reportValidity === 'function') {
+                      input.reportValidity();
+                    } else {
+                      input.focus();
+                    }
+                  }
+                }, false);
+                form._searchValidationSubmitBound = true;
+              }
+
+              return {
+                setCategory: function(nextCategory) {
+                  activeCategory = nextCategory;
+                  updateValidation();
+                },
+                update: updateValidation
+              };
+            };
+          }
+
+          var input = document.querySelector('.search-bar-input input[type="text"][name="q"]');
+          var facetSelect = document.querySelector('select[aria-label="Search by"]');
+          var form = document.querySelector('.search-bar-input');
+          if (!input || !facetSelect || !form) return;
+
+          var validation = window.setupSearchValidation(facetSelect.value, input, form);
+
+          function syncCategory() {
+            validation.setCategory(facetSelect.value);
+          }
+
+          facetSelect.addEventListener('change', syncCategory);
+
+          var observer = new MutationObserver(syncCategory);
+          observer.observe(facetSelect, {
+            attributes: true,
+            attributeFilter: ['value'],
+            childList: true,
+            subtree: true
+          });
+
+          syncCategory();
+          setTimeout(syncCategory, 500);
+        })();
+        </script>
       </div>
       <div class="search-dropdown">
         <ul class="search-results">

openlibrary/templates/search/authors.html

@@ -21,7 +21,7 @@ <h1>$_("Search Authors")</h1>
 
   <div class="section">
     <form class="siteSearch olform" action="">
-        $:render_template("search/searchbox", q=q)
+        $:render_template("search/searchbox", q=q, category='authors')
     </form>
   </div>
 

openlibrary/templates/search/searchbox.html

@@ -1,10 +1,36 @@
-$def with (q, placeholder="")
+$def with (q, placeholder="", category=None)
 
 $ placeholder = placeholder or _('Search')
 
-<div class="searchbox">
-    <input type="text" class="searchbox__input" name="q" size="100" placeholder="$placeholder" aria-label="$_('Search')" value="$q">
+<div class="searchbox" data-category-json="$json_encode(category if category is not None else '')">
+    <input
+        type="text"
+        class="searchbox__input"
+        name="q"
+        size="100"
+        placeholder="$placeholder"
+        aria-label="$_('Search')"
+        value="$q"
+    >
     <div>
         <input type="submit" value="" class="searchbox__btn-icon" aria-label="$_('Search')">
     </div>
 </div>
+
+<script>
+(function(){
+    var searchbox = document.querySelector('.searchbox');
+    var input = document.querySelector('.searchbox__input');
+    var form = searchbox && (searchbox.closest('form') || (input && input.form));
+    if (!searchbox || !input || typeof window.setupSearchValidation !== 'function') return;
+
+    var category = '';
+    try {
+        category = JSON.parse(searchbox.getAttribute('data-category-json') || '""');
+    } catch (e) {
+        category = '';
+    }
+
+  window.setupSearchValidation(category, input, form);
+})();
+</script>