Bootstrap validator plugin for validate form fields

Posted By : Shakil Pathan | 29-Jun-2015

Hi,

In this blog, I am going to explain you about the bootstrap validator plugin.
It is a jQuery plugin to validate form fields and used with Bootstrap 3.
For validating the form data we just need to include bootstrapValidator.js file in our html code and need to do some configuration in our html and javascript code files.

Here are the bootstrap classes and code we need to configure in our html code:

In the above code I have just included some bootstrap classes and named the input boxes.

And here are the javascript configuration that need to do in our javascript file for validate those input boxes:

 $(document).ready(function() {
	$('#validateForm').bootstrapValidator({
		message: 'This value is not valid',
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			username: {
				message: 'The username is not valid.',
				validators: {
					notEmpty: {
					message: 'The username is mandatory'
				},					
				regexp: {
					regexp: /^[a-zA-Z]+$/,
					message: 'The username can only consist of alphabetics'
					}
				}
			},
			password: {
				validators: {
					notEmpty: {
						message: 'The password is required and can\'t be empty'
					}
				}
			}
		}
	})
})

In the above code I have done configuration for validate username and password. You can also validate more field like emails, identical password and confirm password, file validation like size and extension and many more.

For more information you can visit http://bootstrapvalidator.com.

Hope it helps!

Thanks

Shakil