Add single-character author search frontend validation

openlibrary/templates/lib/nav_head.html

@@ -108,6 +108,56 @@
           >
           </a>
         </form>
+        <script>
+        (function(){
+          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;
+
+          function updateValidation() {
+            var isAuthorFacet = facetSelect.value === 'author';
+            if (isAuthorFacet) {
+              input.setAttribute('minlength', '2');
+              input.setAttribute('pattern', '.{2,}');
+              input.setAttribute('oninvalid', 'this.setCustomValidity(this.value.trim().length > 0 && this.value.trim().length < 2 ? "Please enter at least 2 characters" : "")');
+              input.setAttribute('oninput', 'this.setCustomValidity("")');
+            } else {
+              input.removeAttribute('minlength');
+              input.removeAttribute('pattern');
+              input.removeAttribute('oninvalid');
+              input.removeAttribute('oninput');
+              input.setCustomValidity('');
+            }
+          }
+
+          facetSelect.addEventListener('change', updateValidation);
+
+          // Watch for value changes (including programmatic ones from SearchBar.js)
+          var lastValue = facetSelect.value;
+          setInterval(function() {
+            if (facetSelect.value !== lastValue) {
+              lastValue = facetSelect.value;
+              updateValidation();
+            }
+          }, 100);
+
+          // Call once immediately and again after SearchBar.js initializes
+          updateValidation();
+          setTimeout(updateValidation, 500);
+
+          form.addEventListener('submit', function(e){
+            if (facetSelect.value === 'author' && !input.checkValidity()) {
+              e.preventDefault();
+              if (typeof input.reportValidity === 'function') {
+                input.reportValidity();
+              } else {
+                input.focus();
+              }
+            }
+          }, false);
+        })();
+        </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,57 @@
-$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">
+    <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 category = '$category';
+  var input = document.querySelector('.searchbox__input');
+  var form = document.querySelector('.searchbox').closest('form') || (input && input.form);
+  if (!input) return;
+
+  function updateValidation() {
+    var shouldRestrict = category === 'authors';
+    if (shouldRestrict) {
+      input.setAttribute('minlength', '2');
+      input.setAttribute('pattern', '.{2,}');
+      input.setAttribute('oninvalid', 'this.setCustomValidity(this.value.trim().length > 0 && this.value.trim().length < 2 ? "Please enter at least 2 characters" : "")');
+      input.setAttribute('oninput', 'this.setCustomValidity("")');
+    } else {
+      input.removeAttribute('minlength');
+      input.removeAttribute('pattern');
+      input.removeAttribute('oninvalid');
+      input.removeAttribute('oninput');
+    }
+  }
+
+  updateValidation();
+
+  if (form) {
+    form.addEventListener('submit', function(e){
+      if (category === 'authors' && !input.checkValidity()) {
+        e.preventDefault();
+        if (typeof input.reportValidity === 'function') {
+          input.reportValidity();
+        } else {
+          input.focus();
+        }
+      }
+    }, false);
+  }
+})();
+</script>