programer.tips, another cool thing from @nghuuphuoc!

Validating a form placed inside a Bootstrap modal

Examples

Improve it on Github

It's possible to use the plugin with a form which is placed inside a Bootstrap Modal.

Setting options via HTML attributes

If you use HTML attributes to set the validator options, or HTML5 input elements, you must set excluded: [':disabled'].

By default, the plugin will not initialize the fields which are disabled, hidden, or not visible. Since the form is placed inside a model which is not visible after loading page, the fields/validators initialized with HTML attributes might be ignored.

That's the reason why we need to set excluded: [':disabled']. Take a look at the excluded setting for more information.

$(document).ready(function() {
    $('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        excluded: [':disabled'],
        ...
    });
});

Resetting form when showing the modal

If you want to reset all the fields in form whenever the modal is shown, the resetForm() method will help you:

$('#loginModal').on('shown.bs.modal', function() {
    $('#loginForm').bootstrapValidator('resetForm', true);
});

Related example