I created a fiddle including all the required JS/CSS, etc. but could not even get the simple example that jqBootstrapValidation provided to work with Bootstrap 3. After seeing the github repo, it appears that the plugin has not been updated in nearly a year. I recommend switching over to the jQuery Validation Plugin.
To use the jQuery Validation Plugin with Bootstrap, simply add this before your code to fix the formatting:
// override jquery validate plugin defaults
$.validator.setDefaults({
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);
}
}
});
Then, you can check the forms validity via the .valid()
method. You probably want to test while the user is typing, in that case, use jQuery's .keyup()
method in combination with .valid()
.