Search code examples
twitter-bootstrapbootstrapvalidator

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


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


Solution

  • 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>