v6.2.2 fixes abide radio check if only one radio is required

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index 3ff52a27ace449df79f7735c638da43c946ac342..5c8750da303418d50c1e8d62f9ff6459f4227ec8 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -362,19 +362,24 @@ class Abide {
     // If at least one radio in the group has the `required` attribute, the group is considered required
     // Per W3C spec, all radio buttons in a group should have `required`, but we're being nice
     var $group = this.$element.find(`:radio[name="${groupName}"]`);
-    var valid = false;
-
-    // .attr() returns undefined if no elements in $group have the attribute "required"
-    if ($group.attr('required') === undefined) {
-      valid = true;
-    }
+    var valid = false, required = false;
 
-    // For the group to be valid, at least one radio needs to be checked
+    // For the group to be required, at least one radio needs to be required
     $group.each((i, e) => {
-      if ($(e).prop('checked')) {
-        valid = true;
+      if ($(e).attr('required')) {
+        required = true;
       }
     });
+    if(!required) valid=true;
+
+    if (!valid) {
+      // For the group to be valid, at least one radio needs to be checked
+      $group.each((i, e) => {
+        if ($(e).prop('checked')) {
+          valid = true;
+        }
+      });
+    };
 
     return valid;
   }

diff --git a/test/visual/abide/abide-radio.html b/test/visual/abide/abide-radio.html
index 14bc55fa2ae00ea3eb4360134f5d0c54cc0b3f38..56debd8becefe3d3579383bbf8df0682eee696e5 100644 (file)
--- a/test/visual/abide/abide-radio.html
+++ b/test/visual/abide/abide-radio.html
@@ -30,6 +30,27 @@
 
       <hr>
 
+      <p>This form has <strong>one</strong> required radio button.  If you try to submit without picking one, it
+      should show an error.  When you then pick one, the error should clear and let you submit.</p>
+      <form id="form" data-abide novalidate>
+        <div class="alert callout hide" data-abide-error>
+          <p>This form has errors.</p>
+        </div>
+        <fieldset>
+          <legend>Fieldset Label</legend>
+          <input type="radio" name="example3" value="yes" id="example3Yes" />
+          <label for="example3Yes">Yes</label>
+          <input required type="radio" name="example3" value="no" id="example3No" />
+          <label for="example3No">No</label>
+          <input type="radio" name="example3" value="maybe" id="example3Maybe" />
+          <label for="example3Maybe">Maybe</label>
+        </fieldset>
+        <button class="button" type="submit">Submit</button>
+        <button class="button" type="reset">Reset</button>
+      </form>
+
+      <hr>
+
       <p>This form has optional radio buttons.  It should let you submit with or without picking one.</p>
       <form id="form" data-abide novalidate>
         <div class="alert callout hide" data-abide-error>