Select and radio button required attribute

Question

Please help me :( I know that the select attribute should be

<select required></select>

But I have a css how will I put it?

<div class="col-md-6">
                            <div class="form-group">
                              <label for="sel1">Which division of our company are you interested in *</label>
                              <select class="form-control" id="sel1">
                                <option>Please select one</option>
                                <option>Video game consoles and accessories</option>
                                <option>Gaming and entertainment gift cards/codes</option>
                                <option>Both</option>
                              </select>
                            </div>
                          </div>

ALSO, how can I make the radio buttons required as well? For the Others-please specify option.

<div class="col-md-6">

                                <label for="form_business">Type of business *</label>
                                <div>                                    
                                    <label class="radio-inline" style="padding-left:30px;">
                                    <input type="radio" name="optradio">Retailer
                                    </label>

                                    <label class="radio-inline">
                                    <input type="radio" name="optradio">Other - Please specify
                                    </label>
                                     <input id="form_other" type="text" name="other" class="form-control" placeholder="Please specify">
                                   </div>
                              </div>

Use `jquery-validation`.. – Guruprasad J Rao May 04 '16 at 07:27 — Guruprasad J Rao, May 04 '16 at 07:27

score 3 · Answer 1 · edited May 23 '17 at 10:33

Radio button: see here. You just need to set the required attribute for one input of the radiogroup, but you can set it for all.

<div>
  <label class="radio-inline" style="padding-left:30px;">
    <input type="radio" name="optradio" required>Retailer
  </label>

  <label class="radio-inline">
    <input type="radio" name="optradio">Other - Please specify
  </label>
  <input id="form_other" type="text" name="other" class="form-control" placeholder="Please specify">
</div>

For select: Mandatory Have the first value empty - required works on empty values. see more

<select class="form-control" id="sel1" required>
  <option value="">Please select one</option>
  <option>Video game consoles and accessories</option>
  <option>Gaming and entertainment gift cards/codes</option>
  <option>Both</option>
</select>

fiddle here

Thanks for this! I actually figured it out but how about for select form? I tried putting required after the class but it didn't work — Nnn, May 04 '16 at 21:33

score 1 · Answer 2 · edited Dec 23 '20 at 09:42

I know this is an old question. But in case people still have an issue with this question. Well, for a radio button, all you have to add is a required attribute to one of the inputs like this...

<div>                                    
 <label class="radio-inline" style="padding-left:30px;">
   <input type="radio" name="optradio" required>Retailer
 </label>
 <label class="radio-inline">
 <input type="radio" name="optradio">Other-Please specify
 </label>
</div>

As long as one of the inputs has a required button, it would work just fine.

As for the other issue with the select button. unfortunately, there is no required attribute for a select button group just yet. But it can be resolved with javascript by wrapping your select buttons in a div and using js to check if your buttons are selected or not. it's better explained using code like so...

HTML

<div class="form-group">
 <label for="sel1">Which division of our company are you interested in *</label>
 <select class="form-control" id="sel1">
  <option>Video game consoles and accessories</option>
  <option>Gaming and entertainment gift cards/codes</option>
  <option>Both</option>
 </select>
</div>

Javascript

var checkBoxes=document.querySelectorAll('#sel1 input');
var length = 0;
[...checkBoxes].forEach(checkBox=>{
   if(checkBox.checked) length++
})
if(length>0){
 /*
if at least one is checked, you can add whatever code 
 you went here
 */
 [...checkBoxes].forEach(checkBox=>{
    checkBox.setCustomValidity('')
 })
}else{
 /*
 if none is checked, you can add whatever code 
 you went here
*/
 [...checkBoxes].forEach(checkBox=>{
    checkBox.setCustomValidity('error')
 })
}

Note : The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

Hope this answers your question

Select and radio button required attribute

2 Answers2