Menu
I am using Bootstrap Validator. I am unclear on how to use it to validate selection of a radio button. Can someone please clarify?
981
Here's how form validation works with Bootstrap: HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> .
Bootstrapping Validation is a way to predict the fit of a model to a hypothetical testing set when an explicit testing set is not available.
What you should do is set up two variables, both of them serving as boolean flags. Then loop through each set of radio buttons in order to determine if a button has been selected. If so, set the corresponding flag to true, otherwise false. Then at the end, test to see if both flags have been set to true.
It seems that you need to use HTML5's required attribute on at least one of the radio buttons in the group. Bootstrap Validator's page has the following example:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
When I removed the required attribute from one of the two radio buttons, it still wouldn't submit the form. When I removed both, the form submitted without me needing to specify a value for the radio button group.
After you've added the required attribute, make sure you have data-toggle="validator" specified on your form. Here's the full code:
<form role="form" data-toggle="validator">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
