1

The MDN page on radio buttons states:

Validation. Radio buttons don't participate in constraint validation; they have no real value to be constrained.

But this isn't true. As a group they often need to be validated - e.g. if there is no default checked, but the user must check one of the options to continue. This is a commonly required UX to prevent a user submitting a form without making an active choice.

I found there is a RadioNodeList, which doesn't mention validation, but this doesn't seem to have the "willValidate()" method either. I was hoping to be able to set the required attribute at that level, which I know isn't an HTML element, but if done in JS could in theory provide a native UX.

I wondered about copying the selected value into a hidden or text field and setting that field to required but the UI might be confusing.

I know I can use JS, JQ etc. but I haven't been able to find a native method to validate a radio group.

Is there a native way?

UPDATE: This does just work as expected using the required attribute - just tested in Safari, Chrome and Firefox. The reason I wasn't seeing it was due to a data-close attribute on the submit button, which was hiding the form before the native validation prompts could be seen. And the MDN docs mislead me into thinking the field didn't support validation at all, whereas it's more specifically concerned with the constraint API.

scipilot
  • 6,681
  • 1
  • 46
  • 65
  • 1
    Strictly speaking this is not a duplicate. Although I don't care any more, as the `required` attribute has solved my issue, there still is no answer to how to use the Contraint API with the radio element, or the parent node list. – scipilot May 25 '18 at 23:59

2 Answers2

2

Just set required on any radio button in a group of radio buttons with the same name attribute. The browser will enforce that one radio button is selected. You should probably also set required on each radio button, just for readability. But it has the same effect.

e.g.

<form>
  <label for="radio1">
    <input id="radio1" type="radio" name="groupname" required>
    First radio button
  </label>
  <br>
  <label for="radio2">
    <input id="radio2" type="radio" name="groupname">
    Second radio button
  </label>
  <br>
  <input type="submit">
</form>
crenshaw-dev
  • 7,504
  • 3
  • 45
  • 81
  • Yes, this is correct. I had already tried this, but it wasn't showing due to a modal dialog closing immediately on submit, even thought the form doesn't submit. So the MDN docs are wrong. – scipilot May 25 '18 at 23:45
  • @scipilot it's the trouble with a complex code base. And yep, that page must be pretty old. – crenshaw-dev May 25 '18 at 23:48
  • Actually, on reflection the MDN page is correct but confusing. The radio element does not support the Constraint API. But that doesn't mean it doesn't support the "required" attribute, nor validation in general. It only means it does not have the `willValidate` method. – scipilot May 25 '18 at 23:57
  • @scipilot can you elaborate? As an edit to this answer, if you like. I just tested `document.querySelector('input[type="radio"]').willValidate`, and it returned `true`. – crenshaw-dev May 26 '18 at 00:00
  • Ah it's a property not a method? – scipilot May 26 '18 at 00:01
  • @scipilot seems so. I'm not sure there's any meaningful difference between "Constraint API" and "html5 validation attributes," except the former terminology is more likely to be invoked when discussing JavaScript interaction with validation. – crenshaw-dev May 26 '18 at 00:04
  • 1
    OK yes it does work as a property on a radio. ... So the MDN docs for radio are wrong! It does support the API. – scipilot May 26 '18 at 00:05
  • 1
    Yes perhaps. I was going to use the API to hold the form's modal dialogue open. But I was just doing it wrong. Either way then, your answer is the same correct solution. – scipilot May 26 '18 at 00:07
1

Setting required on any radio button or all radio buttons will make the radio button group as required. Checkout the w3.org link

https://www.w3.org/TR/html5/forms.html#example-27c46ff8

Nasim
  • 325
  • 2
  • 14