refactor: work over formnovalidate support & extend visual test

This makes sure Abide behaves identical to a native form with formnovalidate submit.

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index 386a5cacdbf8814b0f8c761ff9010eedba6a349f..a65890ecb58937523177402df0561a0ec48503a9 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -22,6 +22,7 @@ class Abide extends Plugin {
     this.$element = element;
     this.options  = $.extend(true, {}, Abide.defaults, this.$element.data(), options);
     this.isEnabled = true;
+    this.formnovalidate = null;
 
     this.className = 'Abide'; // ie9 back compat
     this._init();
@@ -36,7 +37,7 @@ class Abide extends Plugin {
       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
+    this.$submits = this.$element.find('[type="submit"]');
     const $globalErrors = this.$element.find('[data-abide-error]');
 
     // Add a11y attributes to all fields
@@ -61,12 +62,14 @@ class Abide extends Plugin {
         return this.validateForm();
       });
 
-    this.$submitDisabler
-      .off('click.zf.abide')
-      .on('click.zf.abide', (e) => {
-        e.preventDefault();
-        this.disableValidation();
-        this.$element.submit();
+    this.$submits
+      .off('click.zf.abide keydown.zf.abide')
+      .on('click.zf.abide keydown.zf.abide', (e) => {
+        if (!e.key || (e.key === ' ' || e.key === 'Enter')) {
+          e.preventDefault();
+          this.formnovalidate = e.target.getAttribute('formnovalidate') !== null;
+          this.$element.submit();
+        }
       });
 
     if (this.options.validateOn === 'fieldChange') {
@@ -102,10 +105,25 @@ class Abide extends Plugin {
     this._init();
   }
 
+  /**
+   * Checks whether the submitted form should be validated or not, consodering formnovalidate and isEnabled
+   * @returns {Boolean}
+   * @private
+   */
+  _validationIsDisabled() {
+    if (this.isEnabled === false) { // whole validation disabled
+      return this.isEnabled;
+    } else if (typeof this.formnovalidate === 'boolean') { // triggered by $submit
+      return this.formnovalidate;
+    } else { // triggerd by Enter in non-submit input
+      return this.$submits.first().attr('formnovalidate');
+    }
+  }
+
   /**
    * Enables the whole validation
    */
-  disableValidation(){
+  enableValidation(){
     this.isEnabled = true;
   }
 
@@ -358,8 +376,8 @@ class Abide extends Plugin {
         validator = $el.attr('data-validator'),
         equalTo = true;
 
-    // skip if whole validation is disabled
-    if (this.isEnabled === false) {
+    // skip validation if disabled
+    if (this._validationIsDisabled()) {
       return true;
     }
 
@@ -435,8 +453,9 @@ class Abide extends Plugin {
     var acc = [];
     var _this = this;
 
-    // skip if whole validation is disabled
-    if (this.isEnabled === false) {
+    // skip validation if disabled
+    if (this._validationIsDisabled()) {
+      this.formnovalidate = null;
       return true;
     }
 
@@ -592,6 +611,9 @@ class Abide extends Plugin {
       .each(function() {
         _this.removeErrorClasses($(this));
       });
+
+    this.$submits
+      .off('.abide');
   }
 }
 

diff --git a/test/visual/abide/text.html b/test/visual/abide/text.html
index 64fee8766f241c4313912c10478b5a8aaee62b92..6a9218172e02de7ff0c54aa18fd356e1350d7e31 100644 (file)
--- a/test/visual/abide/text.html
+++ b/test/visual/abide/text.html
@@ -109,11 +109,18 @@
 
           <hr>
 
-          <p>This submit button uses the `formnovalidate` attribute to disable validation before submitting the form.</p>
+          <p>
+            This from contains a submit with the attribute <code>formnovalidate</code> and one without (for comparison).<br>
+            <a href="https://www.w3schools.com/tags/att_input_formnovalidate.asp">https://www.w3schools.com/tags/att_input_formnovalidate.asp</a>
+          </p>
 
           <form data-abide novalidate>
-            <input required type="text" placeholder="Required">
-            <button type="submit" class="button" formnovalidate>Submit</button>
+            <input required type="text" name="firstname" placeholder="First name (required)">
+            <input required type="text" name="lastname" placeholder="Last name (required)">
+            <button type="submit" class="button">Submit (validate)</button>
+            <input required type="email" name="email" placeholder="Email (required)">
+            <input type="text" name="age" placeholder="Age">
+            <button type="submit" class="button" formnovalidate>Submit (novalidate)</button>
             <button type="reset" class="button">Reset</button>
           </form>
         </div>