feat: consider formnovalidate attr

Besides I've added an enableValidation method to set isEnabled via JS.

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index 4a6741301147350526ee718b76ab9ffbaf350e16..38fefa07dae5d752d5dfdf42914a3a14fe060a8d 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -21,6 +21,7 @@ class Abide extends Plugin {
   _setup(element, options = {}) {
     this.$element = element;
     this.options  = $.extend(true, {}, Abide.defaults, this.$element.data(), options);
+    this.isEnabled = true;
 
     this.className = 'Abide'; // ie9 back compat
     this._init();
@@ -32,9 +33,10 @@ class Abide extends Plugin {
    */
   _init() {
     this.$inputs = $.merge(                               // Consider as input to validate:
-      this.$element.find('input').not('[type=submit]'),   // * all input fields expect submit
+      this.$element.find('input').not('[type="submit"]'), // * all input fields expect submit
       this.$element.find('textarea, select')              // * all textareas and select fields
     );
+    this.$submitDisabler = this.$element.find('[type="submit"][formnovalidate]'); // input/button that disables validation on submit
     const $globalErrors = this.$element.find('[data-abide-error]');
 
     // Add a11y attributes to all fields
@@ -59,6 +61,14 @@ class Abide extends Plugin {
         return this.validateForm();
       });
 
+    this.$submitDisabler
+      .off('click.zf.abide')
+      .on('click.zf.abide', (e) => {
+        e.preventDefault();
+        this.enableValidation(false);
+        this.$element.submit();
+      });
+
     if (this.options.validateOn === 'fieldChange') {
       this.$inputs
         .off('change.zf.abide')
@@ -92,6 +102,14 @@ class Abide extends Plugin {
     this._init();
   }
 
+  /**
+   * Enables (true) or disables (false) the whole validation
+   * @param {Boolean} enable
+   */
+  enableValidation(enable) {
+    this.isEnabled = !!enable;
+  }
+
   /**
    * Checks whether or not a form element has the required attribute and if it's checked or not
    * @param {Object} element - jQuery object to check for required attribute
@@ -334,6 +352,11 @@ class Abide extends Plugin {
         validator = $el.attr('data-validator'),
         equalTo = true;
 
+    // skip if whole validation is disabled
+    if (this.isEnabled === false) {
+      return true;
+    }
+
     // don't validate ignored inputs or hidden inputs or disabled inputs
     if ($el.is('[data-abide-ignore]') || $el.is('[type="hidden"]') || $el.is('[disabled]')) {
       return true;
@@ -406,6 +429,11 @@ class Abide extends Plugin {
     var acc = [];
     var _this = this;
 
+    // skip if whole validation is disabled
+    if (this.isEnabled === false) {
+      return true;
+    }
+
     this.$inputs.each(function() {
       acc.push(_this.validateInput($(this)));
     });

diff --git a/test/visual/abide/text.html b/test/visual/abide/text.html
index 1c94a5f6ad598c9f5e2d9386a2eee66b4413cebb..64fee8766f241c4313912c10478b5a8aaee62b92 100644 (file)
--- a/test/visual/abide/text.html
+++ b/test/visual/abide/text.html
@@ -106,6 +106,16 @@
             <button type="submit" class="button">Submit</button>
             <button type="reset" class="button">Reset</button>
           </form>
+
+          <hr>
+
+          <p>This submit button uses the `formnovalidate` attribute to disable validation before submitting the form.</p>
+
+          <form data-abide novalidate>
+            <input required type="text" placeholder="Required">
+            <button type="submit" class="button" formnovalidate>Submit</button>
+            <button type="reset" class="button">Reset</button>
+          </form>
         </div>
       </div>
     </div>