Geek Answers Handbook

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

I want to add a property requiredto the 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>

This works well, I need to select one radio to send, however, if I want to disable one radio, the restriction requiredwill 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, although I have not selected a radio. I wonder why this happened and how I could solve this problem?

I checked my code in FierFox 32.0.3, RHEL6.2

+5
source share
2 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.

, , Constraint, 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.

, "", .

, .

. fooobar.com/questions/539607/...

+3

jquery ,

HTML

<form action='procesPost.html' method='POST'>
        <div class='radio'>
            <input type='radio' name='test' value=1 id='test1' ></input>
            <input type='radio' name='test' value=2 id='test2' disabled></input>  
        </div>
        <input type='SUBMIT' value='submit'></input>
    </form>

Jquery

<script>
        $( document ).ready(function() {    
            $('#test1').attr("required",true);
        });
    </script>

jsfiddle

0

More articles:


All Articles