Using Bootstrap Validator. How does it handle radio button validation?

dugla picture dugla · Jan 22, 2016 · Viewed 11.7k times · Source

I am using Bootstrap Validator. I am unclear on how to use it to validate selection of a radio button. Can someone please clarify?

Answer

Alexander picture Alexander · Jan 22, 2016

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>