Bug where one radio button in group required

The HTML spec does not seemd to clearly state what "required" does when
only some of a radio button set are required.

This answer on StackOverflow states that only one of the set is
required: http://stackoverflow.com/a/8287947/1009332

Per the comments added in the fix:

We cannot just compare allInputs for radio buttons, as the spec for required radio buttons
states that only one of a radio button set needs to be required.

If you have 2 radio buttons, and one is checked, but it's not required, then we get
the other required radio button and see that there are no other radio buttons checked
for the "required" ones.

Thus, if the input control is a radio button, then filter for all radio buttons with
the same name on the form.

This will get all radio buttons of a given name that are checked and see that at
least one is checked. Don't count unchecked required radio if other radio with same
name is checked. But do count checked non-required radio of the same name.

Note, each radio button name that is required is checked only once.

Author: justin808

src/rails.js

@@ -309,24 +309,45 @@
 
     // Helper function which checks for blank inputs in a form that match the specified CSS selector
     blankInputs: function(form, specifiedSelector, nonBlank) {
-      var inputs = $(), input, valueToCheck,
-          selector = specifiedSelector || 'input,textarea',
-          allInputs = form.find(selector);
-
-      allInputs.each(function() {
+      var foundInputs = $(),
+        input,
+        valueToCheck,
+        radiosForNameWithNoneSelected,
+        radioName,
+        selector = specifiedSelector || 'input,textarea',
+        requiredInputs = form.find(selector),
+        checkedRadioButtonNames = {};
+
+      requiredInputs.each(function() {
         input = $(this);
-        valueToCheck = input.is('input[type=checkbox],input[type=radio]') ? input.is(':checked') : !!input.val();
-        if (valueToCheck === nonBlank) {
+        if (input.is('input[type=radio]')) {
 
-          // Don't count unchecked required radio if other radio with same name is checked
-          if (input.is('input[type=radio]') && allInputs.filter('input[type=radio]:checked[name="' + input.attr('name') + '"]').length) {
-            return true; // Skip to next input
-          }
+          // Don't count unchecked required radio as blank if other radio with same name is checked,
+          // regardless of whether same-name radio input has required attribute or not. The spec
+          // states https://www.w3.org/TR/html5/forms.html#the-required-attribute
+          radioName = input.attr('name');
+
+          // Skip if we've already seen the radio with this name.
+          if (!checkedRadioButtonNames[radioName]) {
+
+            // If none checked
+            if (form.find('input[type=radio]:checked[name="' + radioName + '"]').length === 0) {
+              radiosForNameWithNoneSelected = form.find(
+                'input[type=radio][name="' + radioName + '"]');
+              foundInputs = foundInputs.add(radiosForNameWithNoneSelected);
+            }
 
-          inputs = inputs.add(input);
+            // We only need to check each name once.
+            checkedRadioButtonNames[radioName] = radioName;
+          }
+        } else {
+          valueToCheck = input.is('input[type=checkbox],input[type=radio]') ? input.is(':checked') : !!input.val();
+          if (valueToCheck === nonBlank) {
+            foundInputs = foundInputs.add(input);
+          }
         }
       });
-      return inputs.length ? inputs : false;
+      return foundInputs.length ? foundInputs : false;
     },
 
     // Helper function which checks for non-blank inputs in a form that match the specified CSS selector

test/public/test/call-remote-callbacks.js

@@ -241,8 +241,8 @@ asyncTest('unchecked required checkbox should abort form submission', 1, functio
 
 asyncTest('unchecked required radio should abort form submission', 1, function() {
   var form = $('form[data-remote]')
-    .append($('<input type="radio" name="yes_no" required="required" value=1>'))
-    .append($('<input type="radio" name="yes_no" required="required" value=2>'))
+    .append($('<input type="radio" name="yes_no_none" required="required" value=1>'))
+    .append($('<input type="radio" name="yes_no_none" required="required" value=2>'))
     .removeAttr('data-remote')
     .bind('ujs:everythingStopped', function() {
       ok(true, 'ujs:everythingStopped should run');
@@ -275,6 +275,31 @@ asyncTest('required radio should only require one to be checked', 1, function()
   }, 13);
 });
 
+asyncTest('required radio should only require one to be checked if not all radios are required', 1, function() {
+  $(document).bind('iframe:loading', function() {
+    ok(true, 'form should get submitted');
+  });
+
+  var form = $('form[data-remote]')
+    // Check the radio that is not required
+    .append($('<input type="radio" name="yes_no_maybe" value=1 >'))
+    // Check the radio that is not required
+    .append($('<input type="radio" name="yes_no_maybe" value=2 id="checkme">'))
+    // Only one needs to be required
+    .append($('<input type="radio" name="yes_no_maybe" required="required" value=3>'))
+    .removeAttr('data-remote')
+    .bind('ujs:everythingStopped', function() {
+      ok(false, 'ujs:everythingStopped should not run');
+    })
+    .find('#checkme').prop('checked', true)
+    .end()
+    .trigger('submit');
+
+  setTimeout(function() {
+    start();
+  }, 13);
+});
+
 function skipIt() {
   // This test cannot work due to the security feature in browsers which makes the value
   // attribute of file input fields readonly, so it cannot be set with default value.