UI: Form validation improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "author": "Tony Air <tony@twma.pro>",
   "license": "MIT",
   "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

src/js/_components/_ui.form.basics.js

@@ -77,7 +77,11 @@ const FormBasics = (($) => {
       });
 
       $el.on('submit', (e) => {
-        SpinnerUI.show();
+        setTimeout(() => {
+          if (!$el.find('.error').length) {
+            SpinnerUI.show();
+          }
+        }, 100);
       });
 
       $el.addClass(`${NAME}-active`);

src/js/_components/_ui.form.validate.field.js

@@ -1,158 +1,142 @@
 import $ from 'jquery';
-import Events from "../_events";
+import Events from '../_events';
+import FormValidateField from './_ui.form.validate.field';
+import SpinnerUI from './_ui.spinner';
 
-const FormValidateField = (($) => {
+const FormValidate = (($) => {
   // Constants
-  const NAME = 'jsFormValidateField';
+  const NAME = 'jsFormValidate';
   const DATA_KEY = NAME;
   const $Html = $('html, body');
 
-  const FieldUI = 'jsFormFieldUI';
-
-  class FormValidateField {
-
-    constructor(el) {
+  class FormValidate {
+    constructor(element) {
       const ui = this;
-      const $el = $(el);
+      const $element = $(element);
+      const $fields = $element.find('input,textarea,select');
 
-      ui.$el = $el;
+      ui._element = element;
+      $element.data(DATA_KEY, this);
 
-      ui._actions = $el.parents('form').children('.btn-toolbar,.form-actions');
-      $el.data(DATA_KEY, this);
+      ui._fields = $fields;
+      ui._stepped_form = $element.data('jsSteppedForm');
 
       // prevent browsers checks (will do it using JS)
-      $el.attr('novalidate', 'novalidate');
+      $element.attr('novalidate', 'novalidate');
 
-      $el.on('change focusout', (e) => {
-        ui.validate(false);
+      $element.on(Events.FORM_INIT_STEPPED, () => {
+        ui._stepped_form = $element.data('jsSteppedForm');
       });
 
-      $el.addClass(`${NAME}-active`);
-      $el.trigger(Events.FORM_INIT_VALIDATE_FIELD);
+      // init fields validation
+      $fields.each((i, el) => {
+        // skip some fields here
+        if ($(el).attr('role') === 'combobox') {
+          return;
+        }
+
+        new FormValidateField(el);
+      });
+
+      $element.removeClass('error');
+      // check form
+      $element.on('submit', (e) => {
+        ui.validate(true, () => {
+          e.preventDefault();
+
+          // switch to step
+          if (ui._stepped_form) {
+            const $el = $element.find('.error').first();
+
+            if ($el.length) {
+              ui._stepped_form.step($el.parents('.step'));
+            }
+          }
+
+          $element.addClass('error');
+          SpinnerUI.hide();
+
+          $element.trigger(Events.FORM_VALIDATION_FAILED);
+        });
+      });
+
+      $element.addClass(`${NAME}-active`);
+      $element.trigger(Events.FORM_INIT_VALIDATE);
     }
 
     // Public methods
     dispose() {
-      const $el = ui.$el;
+      const $element = $(this._element);
 
-      $el.removeClass(`${NAME}-active`);
-      $.removeData(ui.$el[0], DATA_KEY);
-      ui.$el = null;
+      $element.removeClass(`${NAME}-active`);
+      $.removeData(this._element, DATA_KEY);
+      this._element = null;
     }
 
-    validate(scrollTo = true) {
+    validate(scrollTo = true, badCallback = false) {
+      console.log('Checking the field ...');
       const ui = this;
-      const $el = ui.$el;
-
-      const $field = $el.closest('.field');
-      const extraChecks = $el.data(`${NAME}-extra`);
       let valid = true;
-      let msg = null;
 
-      const val = $el.val();
+      ui._fields.each((i, el) => {
+        const $el = $(el);
+        const fieldUI = $el.data('jsFormValidateField');
 
-      // browser checks + required
-      if (!ui.$el[0].checkValidity() ||
-        ($el.hasClass('required') && (!val.length || !val.trim().length ||
-          ui.isHtml(val) && !$(val).text().length
-        ))
-      ) {
-        valid = false;
-      }
+        if (fieldUI && !fieldUI.validate()) {
+          SpinnerUI.hide();
 
-      // validate URL
-      if ($el.hasClass('url') && val.length && !this.valideURL(val)) {
-        valid = false;
-        msg = 'URL must start with http:// or https://. For example: https://your-domain.com/';
-      }
+          console.log('Invalid field data:');
+          console.log($el);
 
-      this.removeError();
+          if (badCallback) {
+            badCallback();
+          }
 
-      // extra checks
-      if (extraChecks) {
-        extraChecks.forEach((check) => {
-          valid = valid && check();
-        });
-      }
+          valid = false;
+          return false;
+        }
+      });
 
-      if (valid) {
-        return true;
-      }
-
-      this.setError(scrollTo, msg);
-
-      return false;
-    }
-
-    isHtml(str) {
-      const doc = new DOMParser().parseFromString(str, "text/html");
-      return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);
-    }
-
-    valideURL(str) {
-      const pattern = new RegExp('^(https?:\\/\\/){1}' + // protocol
-        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
-        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-        '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
-      return pattern.test(str);
-    }
-
-    setError(scrollTo = true, msg = null) {
-      const ui = this;
-      const fieldUI = ui.$el.data(FieldUI);
-
-      const $field = ui.$el.closest('.field');
-      const pos = $field.offset().top;
-
-      ui.removeError();
-
-      $field.addClass('error');
-      if (msg) {
-        fieldUI.addMessage(msg, 'alert-error alert-danger', scrollTo);
-      } else if (scrollTo) {
-        $field.focus();
-        $Html.scrollTop(pos - 100);
-      }
-    }
-
-    removeError() {
-      const ui = this;
-      const fieldUI = ui.$el.data(FieldUI);
-
-      const $field = ui.$el.closest('.field');
-
-      $field.removeClass('error');
-
-      $field.removeClass('holder-error');
-      $field.removeClass('holder-validation');
-      $field.find('.alert-error').remove();
+      return valid;
     }
 
     static _jQueryInterface() {
       return this.each(function() {
-        // attach functionality to el
-        const $el = $(this);
-        let data = $el.data(DATA_KEY);
+        // attach functionality to element
+        const $element = $(this);
+        let data = $element.data(DATA_KEY);
 
         if (!data) {
-          data = new FormValidateField(this);
-          $el.data(DATA_KEY, data);
+          data = new FormValidate(this);
+          $element.data(DATA_KEY, data);
         }
       });
     }
   }
 
   // jQuery interface
-  $.fn[NAME] = FormValidateField._jQueryInterface;
-  $.fn[NAME].Constructor = FormValidateField;
+  $.fn[NAME] = FormValidate._jQueryInterface;
+  $.fn[NAME].Constructor = FormValidate;
   $.fn[NAME].noConflict = function() {
     $.fn[NAME] = JQUERY_NO_CONFLICT;
-    return FormValidateField._jQueryInterface;
+    return FormValidate._jQueryInterface;
   };
 
-  return FormValidateField;
+  // auto-apply
+  $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+    $('form').each((i, el) => {
+      const $el = $(el);
+
+      // skip some forms
+      if ($el.hasClass('no-validation')) {
+        return true;
+      }
+
+      $el.jsFormValidate();
+    });
+  });
+
+  return FormValidate;
 })($);
 
-export default FormValidateField;
+export default FormValidate;

src/js/_components/_ui.form.validate.js

@@ -1,6 +1,8 @@
 import $ from 'jquery';
-import Events from "../_events";
-import FormValidateField from "./_ui.form.validate.field";
+import Events from '../_events';
+
+import FormBasics from './_ui.form.basics';
+import FormValidateField from './_ui.form.validate.field';
 import SpinnerUI from './_ui.spinner';
 
 const FormValidate = (($) => {
@@ -10,13 +12,13 @@ const FormValidate = (($) => {
   const $Html = $('html, body');
 
   class FormValidate {
-
     constructor(element) {
       const ui = this;
       const $element = $(element);
       const $fields = $element.find('input,textarea,select');
 
       ui._element = element;
+      ui.$element = $element;
       $element.data(DATA_KEY, this);
 
       ui._fields = $fields;
@@ -80,14 +82,16 @@ const FormValidate = (($) => {
         const fieldUI = $el.data('jsFormValidateField');
 
         if (fieldUI && !fieldUI.validate()) {
+          SpinnerUI.hide();
+
+          ui.$element.addClass('error');
+          console.log('Invalid form data:');
+          console.log($el);
+
           if (badCallback) {
             badCallback();
           }
 
-          console.log('Invalid form data:');
-          console.log($el);
-
-          SpinnerUI.hide();
           valid = false;
           return false;
         }

src/js/_components/_ui.header-footer.js

@@ -14,13 +14,9 @@ const HeaderUI = (($) => {
       const ui = this;
       ui.dispose();
 
-      if (!$(`.${CLASSNAME}`).length) {
-        return;
-      }
+      //console.log(`Initializing: ${NAME}`);
 
-      console.log(`Initializing: ${NAME}`);
-
-      const $header = $('#Header,.jsHeaderUI');
+      const $header = $(`#Header,.js${NAME}`);
       const updateHeader = () => {
         const h = $header.height();
         const s = $Body.scrollTop();