Bug 35472 – Radio buttons always be in valueMissing state if they are in a form element

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Brenton]

What steps will reproduce the problem?
1. Create an input group of the type 'radio' with @required set.
2. Check one of the boxes.
3. Call widget.checkValidity()

What is the expected result?
If any box in the group is checked, the whole control is valid.  widget.checkValidity() should return true.

What happens instead?
widget.checkValidity() always returns false if a radio group is required, and causes document.forms[0].checkValidity() to also return false.  It does this even if a button is checked (which defies the spec), or if the button you call it against is checked (which defies logic).

Please provide any additional information below.

From the HTML5 spec:

	"Constraint validation: If the element is required and all of the input elements in the radio button group have a checkedness that is false, then the element is suffering from being missing."

Although not technically a regression, this bug breaks existing sites.  Any site that was using feature detection to call the HTML5 validity API no longer works.  document.forms[0].checkValidity is not null, so the native API will be used; however, this bug makes any form with a required radio group fail the checkValidity test.  This can prevent forms from being submitted.

ImARegular.com has begun to receive reports that our surveys no longer work in Chrome.

The workaround is to use the attached JavaScript code to detect is the HTML5 validity API is properly supported.  It also functions as a test case.

Chromium Bug:
http://code.google.com/p/chromium/issues/detail?id=36962

--------
Test case
--------

var hasCheckValidity = document.forms[0].checkValidity;

if (hasCheckValidity) {
	var testForm = document.createElement('form');
	var testInput = [];
	var addTestWidget = function(i) {
		testInput[i] = document.createElement('input');
		testInput[i].type = 'radio';
		testInput[i].required = 'required';
		testInput[i].name = 'radio_validity_test';
		testInput[i].value = i;
		testForm.appendChild(testInput[i]);
	}
	addTestWidget(0);
	addTestWidget(1);
	testInput[0].checked = true;
	hasCheckValidity = testInput[1].checkValidity();
}

[Kent Tamura]

Ok, I confirmed. We have a test for radio buttons, but it covers only a case of no <form> element.

[Kent Tamura]

Created attachment 49682 [details]
Proposed patch

[Eric Seidel (no email)]

Comment on attachment 49682 [details]
Proposed patch

The style bot failed to catch this spacing error: (yes, I realize you were just moving code)
 166 static inline CheckedRadioButtons& checkedRadioButtons(const HTMLInputElement *element)

otherwise looks good.

[Kent Tamura]

(In reply to comment #3)
> (From update of attachment 49682 [details])
> The style bot failed to catch this spacing error: (yes, I realize you were just
> moving code)
>  166 static inline CheckedRadioButtons& checkedRadioButtons(const
> HTMLInputElement *element)
> 
> otherwise looks good.

Ok, I'll fix it and land.

[Kent Tamura]

Landed as r55640 <http://trac.webkit.org/changeset/55640>