I want to add required
property in radio input field and here is my code
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test radio</title>
<style>
div.radio{
background-color:silver;
}
</style>
</head>
<body>
<form action='procesPost.html' method='POST'>
<div class='radio'>
<input type='radio' required name='test' value=1>
<input type='radio' required name='test' value=2>
</div>
<input type='SUBMIT' value='submit'>
</form>
</body>
</html>
It works well,I have to select one radio to submit, However, if I want to disable one radio, the required
constraint will not work
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>test radio</title>
<style>
div.radio{
background-color:silver;
}
</style>
</head>
<body>
<form action='procesPost.html' method='POST'>
<div class='radio'>
<input type='radio' required name='test' value=1>
<input type='radio' required disabled name='test' value=2>
</div>
<input type='SUBMIT' value='submit'>
</form>
</body>
</html>
Now, I can submit the form even though I didn't select any radio. I wonder why this would happen and how could I solve this problem?
I tested my code in FierFox 32.0.3, RHEL6.2
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable. Tip: Disabled <input> elements in a form will not be submitted!
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
According to CBroe:
www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute:
Constraint validation: If an element is disabled, it is barred from constraint validation.
http://www.w3.org/TR/html5/forms.html#barred-from-constraint-validation:
A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation.
And finally, from the list of Constraint validation steps, http://www.w3.org/TR/html5/forms.html#constraint-validation:
3.1: If field is not a candidate for constraint validation, then move on to the next element.
That means, a disabled element will just be “passed over” when form validity is checked.
It doesn’t trigger any errors, and has no influence whatsoever on the validation state of the form it belongs to.
The comment is in this link. https://stackoverflow.com/a/30533215
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With