Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I use "required" and "disabled" at the same time in radio input field?

Tags:

html

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

like image 465
Alaya Avatar asked Jan 26 '15 06:01

Alaya


People also ask

How do you keep input field Disabled?

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!

How do you change the input field as required?

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.


1 Answers

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

like image 128
J.C. Avatar answered Sep 21 '22 10:09

J.C.