required on radio buttons

Question

i am using a single html5 required attribute for group of radio buttons as this

<td>
   <label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" required  value="english" />
   <label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2"  value="arabic" />
</td>

but its not working as per the expectaions i am not able to submit the result until i select english i.e even when i select arabic "the reqired field message is prompted on english"

Possible duplicate of [HTML5: How to use the "required" attribute with a "radio" input field](http://stackoverflow.com/questions/8287779/html5-how-to-use-the-required-attribute-with-a-radio-input-field). Futher to this, you need to give your radios the same `name` attribute - yours has no name — Pete, Sep 27 '16 at 14:34
well if you want to use html 5 validation and not angular validation, then I would suggest you do — Pete, Sep 27 '16 at 14:48

score 0 · Answer 1 · answered Sep 27 '16 at 14:42

You need to add a name attribute for your Radio Button Group:

<input type="radio" ng-model="Customer.language" id="input1"  value="english" name="language" required />
<input type="radio" ng-model="Customer.language" id="input2"  value="arabic"  name="language" required />

Note: i added the Required Statement for the second input as well.

score 0 · Answer 2 · answered Sep 27 '16 at 14:44

I see some "ng-" in your component, so i think you use AngularJS. So, you can try this one for your required :

<td>
  <label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" ng-required="!Customer.language"  value="english" />
  <label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" ng-required="!Customer.language" value="arabic" />

And name is not needed ;)

With that, your field will be required only if no value is selected ;)

required on radio buttons

2 Answers2