From: Geoff Kimball Date: Tue, 1 Mar 2016 22:14:38 +0000 (-0800) Subject: In Abide, properly validate radio buttons, fixes #7196 X-Git-Tag: v6.2.1~82 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cc2f2c668bb4f795cfad130915baf1b5f45fd79b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git In Abide, properly validate radio buttons, fixes #7196 --- diff --git a/js/foundation.abide.js b/js/foundation.abide.js index cc481b481..685045bac 100644 --- a/js/foundation.abide.js +++ b/js/foundation.abide.js @@ -83,11 +83,6 @@ class Abide { var isGood = true; switch ($el[0].type) { - case 'checkbox': - case 'radio': - isGood = $el[0].checked; - break; - case 'select': case 'select-one': case 'select-multiple': @@ -220,6 +215,7 @@ class Abide { equalTo = this.options.validators.equalTo($el); } + var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1; var message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide'; @@ -286,23 +282,29 @@ class Abide { } /** - * Determines whether or a not a radio input is valid based on whether or not it is required and selected + * Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single ``, it validates by checking the `required` and `checked` properties of all radio buttons in its group. * @param {String} groupName - A string that specifies the name of a radio button group * @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required) */ validateRadio(groupName) { - var $group = this.$element.find(`:radio[name="${groupName}"]`), - counter = [], - _this = this; - - $group.each(function(){ - var rdio = $(this), - clear = _this.requiredCheck(rdio); - counter.push(clear); - if(clear) _this.removeErrorClasses(rdio); + // 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; + } + + // 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 counter.indexOf(false) === -1; + return valid; } /** diff --git a/test/visual/abide/abide-radio.html b/test/visual/abide/abide-radio.html new file mode 100644 index 000000000..04332f964 --- /dev/null +++ b/test/visual/abide/abide-radio.html @@ -0,0 +1,57 @@ + + + + + + + Foundation for Sites Testing + + + +

Abide Radio Buttons

+ +

This form has required radio buttons.

+ + +

+ +

This form has optional radio buttons.

+ + +

+ + + + + +