LOYALIST-20 Search results: add required feature w/ BS5+ally validity

configuration/views.view.search.yml

@@ -432,7 +432,7 @@ display:
           exposed: true
           expose:
             operator_id: search_api_fulltext_op
-            label: 'Search The Loyalist Collection Catalogue'
+            label: 'Search The Loyalist Collection Catalogue <strong class="text-danger" aria-label="required">*</strong>'
             description: 'Enter 1 or more terms to find'
             use_operator: false
             operator: search_api_fulltext_op
@@ -836,14 +836,14 @@ display:
       exposed_form:
         type: input_required
         options:
-          submit_button: Search
+          submit_button: 'Display Results'
           reset_button: false
           reset_button_label: Reset
           exposed_sorts_label: 'Sort by'
           expose_sort_order: false
           sort_asc_label: Asc
           sort_desc_label: Desc
-          text_input_required: '<span class="fa-solid fa-circle-info me-1 text-secondary"></span>Enter the expression you want to find and press <strong>Search</strong> to return <em>matching</em> records. Otherwise, press <strong>Search</strong> without any terms to return <em>all</em> records.'
+          text_input_required: '<span class="fa-solid fa-circle-info me-1 text-secondary"></span>Enter the query you want to find and press <strong>Display Results</strong> to return <em>matching</em> records.'
           text_input_required_format: wysiwyg
       sorts:
         search_api_relevance:

custom/modules/loyalist_core/js/search_input_required.js

@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Add required attribute on input elements of type 'search'.
+ * Use built-in HTML5 form validation reporting and apply BS4 failure style on failure.
+ */
+(function ($) {
+    // Ensure required attribute present input of type 'search'.
+    const search_input = 'input[type="search"]';
+    const required = $(search_input).attr('required');
+    if (typeof required === 'undefined' && required !== true) {
+        $(search_input).attr('required', true);
+        $(search_input).attr('required', true);
+    }
+
+    // If form validity check fails then apply BS5 invalid class.
+    document.getElementById("edit-fulltext").addEventListener("invalid",
+        function () {
+                   $(this).addClass('is-invalid').attr('aria-invalid', 'true');
+        }
+    );
+
+})(jQuery);

custom/modules/loyalist_core/loyalist_core.libraries.yml

@@ -0,0 +1,5 @@
+search_input_required:
+  js:
+    js/search_input_required.js: {}
+  dependencies:
+    - core/jquery

custom/modules/loyalist_core/loyalist_core.module

@@ -15,4 +15,10 @@ function loyalist_core_form_views_exposed_form_alter(&$form, FormStateInterface
   if (isset($form['fulltext'])) {
     $form['fulltext']['#type'] = 'search';
   }
+
+  switch ($form['#id']) {
+    case 'views-exposed-form-search-display-page-search':
+      $form['#attached']['library'][] = 'loyalist_core/search_input_required';
+      break;
+  }
 }