BIG-22371 - Add validation to search boxes

assets/js/theme/global/quick-search.js

@@ -2,20 +2,52 @@ import $ from 'jquery';
 import _ from 'lodash';
 import utils from 'bigcommerce/stencil-utils';
 import stencilDropDown from './stencil-dropdown';
+import nod from '../common/nod';
+
+let internals = {
+    initValidation($form) {
+        this.validator = nod({
+            submit: $form
+        });
+
+        return this;
+    },
+    bindValidation(element) {
+        if (this.validator) {
+            this.validator.add({
+                selector: element,
+                validate: 'presence',
+                errorMessage: element.data('error-message')
+            });
+        }
+
+        return this;
+    },
+    checkElement() {
+        if (this.validator) {
+            this.validator.performCheck();
+            return this.validator.areAll('valid');
+        }
+        return false;
+    }
+};
 
 export default function() {
     const TOP_STYLING = 'top: 49px;';
     const $quickSearchResults = $('.quickSearchResults');
     const $quickSearchDiv = $('#quickSearch');
+    let validator = internals.initValidation($quickSearchDiv)
+        .bindValidation($quickSearchDiv.find('#search_query'));
 
     stencilDropDown.bind($('[data-search="quickSearch"]'), $quickSearchDiv, TOP_STYLING);
 
     // stagger searching for 200ms after last input
     const doSearch = _.debounce((searchQuery) => {
         utils.api.search.search(searchQuery, {template: 'search/quick-results'}, (err, response) => {
             if (err) {
-                throw new Error(err);
+                return false;
             }
+
             $quickSearchResults.html(response);
         });
     }, 200);
@@ -30,4 +62,13 @@ export default function() {
 
         doSearch(searchQuery);
     });
+
+    // Catch the submission of the quick-search
+    $quickSearchDiv.on('submit', (event) => {
+        if (!validator.checkElement()) {
+            return event.preventDefault();
+        }
+
+        return true;
+    });
 }

assets/js/theme/search.js

@@ -2,6 +2,7 @@ import PageManager from '../page-manager';
 import FacetedSearch from './common/faceted-search';
 import collapsible from './common/collapsible';
 import 'vakata/jstree';
+import nod from './common/nod';
 
 export default class Search extends PageManager {
     constructor() {
@@ -69,6 +70,9 @@ export default class Search extends PageManager {
         const $categoryTreeContainer = $searchForm.find('[data-search-category-tree]');
         const treeData = [];
 
+        let validator = this.initValidation($searchForm)
+            .bindValidation($searchForm.find('#search_query_adv'));
+
         collapsible();
 
         this.context.categoryTree.forEach((node) => {
@@ -78,9 +82,13 @@ export default class Search extends PageManager {
         this.categoryTreeData = treeData;
         this.createCategoryTree($categoryTreeContainer);
 
-        $searchForm.submit(() => {
+        $searchForm.submit((event) => {
             const selectedCategoryIds = $categoryTreeContainer.jstree().get_selected();
 
+            if (!validator.check()) {
+                return event.preventDefault();
+            }
+
             $searchForm.find('input[name="category\[\]"]').remove();
 
             for (const categoryId of selectedCategoryIds) {
@@ -140,4 +148,34 @@ export default class Search extends PageManager {
 
         $container.jstree(treeOptions);
     }
+
+    initValidation($form) {
+        this.$form = $form;
+        this.validator = nod({
+            submit: $form
+        });
+
+        return this;
+    }
+
+    bindValidation($element) {
+        if (this.validator) {
+            this.validator.add({
+                selector: $element,
+                validate: 'presence',
+                errorMessage: $element.data('error-message')
+            });
+        }
+
+        return this;
+    }
+
+    check() {
+        if (this.validator) {
+            this.validator.performCheck();
+            return this.validator.areAll('valid');
+        }
+
+        return false;
+    }
 }

lang/en.json

@@ -697,6 +697,9 @@
             "show-filters": "Show Filters",
             "hide-filters": "Hide Filters",
             "browse-by": "Browse by"
+        },
+        "error": {
+            "empty_field": "Search field cannot be empty."
         }
     },
     "page_not_found": {

templates/components/common/quick-search.html

@@ -3,7 +3,7 @@
         <fieldset class="form-fieldset">
             <div class="form-field">
                 <label class="u-hiddenVisually" for="search_query">{{lang "search.quick_search.input_label"}}</label>
-                <input class="form-input" data-search-quick name="search_query" id="search_query" placeholder="{{lang 'search.quick_search.input_placeholder'}}" autocomplete="off">
+                <input class="form-input" data-search-quick name="search_query" id="search_query" data-error-message="{{lang 'search.error.empty_field'}}" placeholder="{{lang 'search.quick_search.input_placeholder'}}" autocomplete="off">
             </div>
         </fieldset>
     </form>

templates/components/search/advanced-search.html

@@ -8,7 +8,7 @@
                     {{lang 'forms.search.query' }}
                     <small>{{lang 'common.required' }}</small>
                 </label>
-                <input type="text" class="form-input" name="search_query_adv" id="search_query_adv" value="{{forms.search.query}}">
+                <input type="text" class="form-input" name="search_query_adv" data-error-message="{{lang 'search.error.empty_field'}}" id="search_query_adv" value="{{forms.search.query}}">
             </div>
 
             <div class="form-field">