From fbed87aa463cab17c4e2fbd864f2db68377d2690 Mon Sep 17 00:00:00 2001
From: Jonas Linde <github@jonaseel.se>
Date: Tue, 9 Aug 2022 00:45:04 +0200
Subject: [PATCH] Activate field validation when expanding the advanced options
 (#722)

---
 pywb/static/search.js      | 18 +++++++++++++-----
 pywb/templates/search.html |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/pywb/static/search.js b/pywb/static/search.js
index 70719c3e..dd189bb9 100644
--- a/pywb/static/search.js
+++ b/pywb/static/search.js
@@ -29,7 +29,8 @@ var elemIds = {
   match: 'match-type-select',
   url: 'search-url',
   form: 'search-form',
-  resultsNewWindow: 'open-results-new-window'
+  resultsNewWindow: 'open-results-new-window',
+  advancedOptions: 'advanced-options'
 };
 
 function makeCheckDateRangeChecker(dtInputId, dtBadNotice) {
@@ -158,6 +159,13 @@ function performQuery(url) {
   }
 }
 
+function validateFields(form) {
+  if (!didSetWasValidated) {
+    form.classList.add('was-validated');
+    didSetWasValidated = true;
+  }
+}
+
 $(document).ready(function() {
   $('[data-toggle="tooltip"]').tooltip({
     container: 'body',
@@ -180,12 +188,12 @@ $(document).ready(function() {
     event.stopPropagation();
     var url = searchURLInput.value;
     if (!url) {
-      if (!didSetWasValidated) {
-        form.classList.add('was-validated');
-        didSetWasValidated = true;
-      }
+      validateFields(form);
       return;
     }
     performQuery(url);
   });
+  document.getElementById(elemIds.advancedOptions).onclick = function() {
+    validateFields(form);
+  }
 });
diff --git a/pywb/templates/search.html b/pywb/templates/search.html
index af8f1eb5..e5b0ecba 100644
--- a/pywb/templates/search.html
+++ b/pywb/templates/search.html
@@ -47,7 +47,7 @@ window.wb_prefix = "{{ wb_prefix }}";
                     {% trans %}Search{% endtrans %}
                 </button>
                 <button class="btn btn-outline-info float-right mr-3" type="button" role="button"
-                        data-toggle="collapse" data-target="#advancedOptions"
+                        data-toggle="collapse" data-target="#advancedOptions" id="advanced-options"
                         aria-expanded="false" aria-controls="advancedOptions" aria-label="Advanced Search Options">
                     {{ _('Advanced Search Options') }}
                 </button>