CODEWITHSUNDEEP
javascriptjqueryvalidationtwitter-bootstrap
Paulo Reis
Paulo Reis

Reputation: 15

Conditional validation with BootstrapValidator

I'm using BootstrapValidator plugin to validate a form, however i have following problem. I have a "Phone" field and a "Mobile" field if the user does not enter either of them, I wanted to launch a custom message (you need to inform one phone number), and if he inform any (phone or mobile) validation would be satisfied.

The doubt is: Is it possible to use conditional inside BootstrapValidator?

Upvotes: 0

Views: 5628

Answers (1)

Barney
Barney

Reputation: 2373

This seems to be working for a lot of people derived from this post:

$('form').validate({
    rules: {
        Phone: {
            required: true
        },
        Mobile: {
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

and the html:

<form>
    <div class="form-group">
        <label class="control-label" for="Phone">Phone:</label>
        <div class="input-group">
            <input class="form-control" name="Phone" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="Mobile">Mobile:</label>
        <div class="input-group">
            <input class="form-control" name="Mobile" type="text" />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Upvotes: 1

Related Questions