Jenny
Jenny

Reputation: 545

radio button ignores required attribute

I am coding a form click here. On top of the form I have three radio buttons that are set required-"required (tried just required, required="true"), but the radio buttons are ignoring this attribute. So I can submit the form without selecting any radio button. I googled and found that I am doing it the right way. I can have one required attribute in the family of radios and it will still work, but it does not for some reason.

<ul class="regForm">
                        <li style="width:100%">
                        <div><input type="radio" tabindex="1" value="Guests" name="Reservation" onChange="att(1)" id="guests" required="required" />                                                <span class="record">Guest(s) $150 per guest</span></div>
                        </li>
                        <li style="width:100%">
                        <div><input type="radio" tabindex="1" value="Table" name="Reservation" onChange="att(2)" id="table"  required="required"/>                                              <span class="record">Table(s) $1,500 per table <span class="note">(seats 10)</span></span></div>
                        </li>
                        <li style="width:100%">
                        <div><input type="radio" tabindex="1" value="Unable to Attend" name="Reservation" onChange="att(3)" required="required"/>                                               <span class="record">Unable to Attend</span></div>
                        </li>

                    </ul>

Please help me to fix it. Thank you

Upvotes: 1

Views: 1669

Answers (1)

kenny
kenny

Reputation: 1776

You only need one "requiered". For example like this:

<form>
<label for="input1">1:</label><input type="radio" name="test" id="input1" required value="1" /><br />
<label for="input2">2:</label><input type="radio" name="test" id="input2" value="2" /><br />
<label for="input3">3:</label><input type="radio" name="test" id="input3" value="3" /><br />
<input type="submit" value="send" />
</form> 

See this fiddle

You should change your code to this

<input type="radio" tabindex="1" value="Guests" name="Reservation" onChange="att(1)" id="guests" required /> 

Upvotes: 1

Related Questions