Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 981
dugla Avatar asked Jan 22 '16 20:01

dugla


People also ask

Is it possible to implement form validation using bootstrap?

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

What is bootstrap validation?

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.

How check multiple radio button is checked or not in Javascript?

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.


1 Answers

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>
like image 104
Alexander Avatar answered Sep 27 '22 22:09

Alexander