3

html 5 form contains two radio buttons. How to force user to select one radion button before submitting form ? I tried to use required but there is not radio button group, required shoult applited to group.

<form action="/Home/Sendtitle" method="post">
<p>
  Title*  <span>
    <span>
      <span>
        <input name="staatus" type="radio" value="Mister" autofocus>&nbsp;
        <span>Mister</span>
      </span>
      <span>
        <input name="staatus" type="radio" value="Missis">&nbsp;
        <span>Missis</span>
      </span>
    </span>
  </span>
</p>

<p>
  <input type="submit" value="Send title" >
</p>

</form>
Andrus
  • 26,339
  • 60
  • 204
  • 378
  • Possible duplicate: http://stackoverflow.com/questions/8287779/html5-how-to-use-the-required-attribute-in-an-input-field-with-type-radio – dtyler Mar 09 '14 at 10:21

4 Answers4

10

Use required attribute.

<input name="staatus" type="radio" value="Missis" required>
Arjit
  • 3,290
  • 1
  • 17
  • 18
6

You just need to set the required-attribute for one input of the radiogroup, but you can set it for all.

<form action="/Home/Sendtitle" method="post">
<p>
  Title*  <span>
    <span>
      <span>
        <input name="staatus" type="radio" value="Mister" autofocus required>&nbsp;
        <span>Mister</span>
      </span>
      <span>
        <input name="staatus" type="radio" value="Missis">&nbsp;
        <span>Missis</span>
      </span>
    </span>
  </span>
</p>

<p>
  <input type="submit" value="Send title" >
</p>

</form>
Atif Tariq
  • 2,650
  • 27
  • 34
  • Anyone know the current state of browsers still implementing this incorrectly by requiring every radio option having the required attribute? – Brad Kent Feb 23 '16 at 23:13
0

You can use the property required as its a boolean attribute that solve ur problem. required="required"

arivu86
  • 81
  • 2
  • 2
  • 12
  • 1
    Drop the `="required"` part. From the HTML5 spec: _"A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value."_ – Madbreaks Feb 02 '18 at 18:57
0

And you can use it once:

<span>
    <input name="status" type="radio" value="Mister" autofocus required="required">&nbsp;
    <span>Mister</span>
  </span>
  <span>
    <input name="status" type="radio" value="Missis">&nbsp;
    <span>Missis</span>
  </span>
Dionny Prensa
  • 139
  • 3
  • 5