Powerful Form Field Validator For Jquery And Bootstrap Using Bootstrap Validator

Article

Client side validation has been growing very fast due to its smaller impact to the server and you can reduce the round trips also by just filtering the required information in the form of form field validations.

There are many types of form fields which need a strict validation, not a single one, like field mayallow you to only enter only the numbers, characters or both, but also it should requir you to chec that the field should not be empty having a specific format, either for example with password field it should have a check to contain special characters in field followed by single capital case, and a more interesting password strength and length of password should be between 8 to 15 or like this. Would you guess you can do ut in fewer lines of code? The answer to this question is NO.

Why because you cannot handle it; you require more time to code and use a lot of things to do the one kind of task to validate proper password standards. So here I want to introduce you to the best validation library which has a lot of more support for not only bootstrap but for Foundation, Pure, Semantic UI, UI Kit and lots more.

You can read more about the library and its documentation from here.

Before starting to implement read the getting started guide from here.

There are many form field validators in the market but what makes it best? Check out the features list.

Features of form Validator

Language packs included supports multiple language pack.
Glyph icons to validate input by using icons.
Support for multiple frameworks bootstrap, Foundation, Semantic UI and lot of others more.
Compatible with HTML5 Input types
Compatible with modern Browsers.
Supports error message of type tooltip, message and lot of other ways to check validity.
Over 51 built in validators for different form fields.
having add-ons like multiple language and re-captcha support

This is all the features it supports, now let's move on to use it in web application.

Step 1:

For every JQuery Library it is necessary to first include scripts file in to the application and reference it on the page. First make a choice from the supported frameworks and select one you are working with and include it. For tutorial purposes I am using bootstrap here. Firstly, add following basic required jquery and Twitter bootstrap script to the head section of page.

Note: Form validation requires jquery version => 1.9.1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Step 2:

Add bootstrap validator scripts to the head section just below to the firstly added scripts.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

I am using the CDN files here you may download scripts and follow the instructions in getting started panel to integrate with best of you criteria.

Step 3:

Let’s build the form which can be validated through bootstrap validator. I am using signup form for this demo as it contains lots of things to cover.

<form id="SignupForm" method="post" class="form-horizontal">
<div class="form-group"> <label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5"> <input type="text" class="form-control" name="username" /> </div>
</div>
<div class="form-group"> <label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5"> <input type="text" class="form-control" name="email" /> </div>
</div>
<div class="form-group"> <label class="col-lg-3 control-label">Password</label>
<div class="col-lg-5"> <input type="password" class="form-control" name="password" /> </div>
</div>
<div class="form-group"> <label class="col-lg-3 control-label">Retype password</label>
<div class="col-lg-5"> <input type="password" class="form-control" name="confirmPassword" /> </div>
</div>
<div class="form-group"> <label class="col-lg-3 control-label" id="captchasignup"></label>
<div class="col-lg-2"> <input type="text" class="form-control" name="captcha" /> </div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary">Sign up</button> </div>
</div>
</form>

UI View looks like this after adding form and applying bootstrap.

I am using Html elements for validating form fields in asp.net, if you are using server side controls then find this Tutorial.

You can see the classes used in the form fields are all bootstrap for example the class class="form-horizontal" used in the form tag is specifically used in bootstrap to horizontally align the form fields like label and input control.

Step 4:

Now we come to our important work which is validating the form fields section via bootstrap validator script. Before discussing deep about the script section let’s have a look at the syntax of writing script which is given below:

$(formSelector).formValidation
({
// Indicate the framework
// It can be: bootstrap, foundation, pure, semantic, uikit
framework: 'bootstrap',
// ... Form settings go here ...
fields:
{
fieldName:
{
// ... Field settings go here ...
validators: {
specificValidatorName: {
// ... common validator settings go here ...
// ... specific validator settings ...
}
}
}
}
});

Syntax contains comments for better understanding.

We have initialize our script in document. Ready function of jQuery,

<script type="text/javascript">
$(document).ready(function()
{
// Generate a simple captcha
function randomNumber(min, max)
{
return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#captchasignup').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#SignupForm).bootstrapValidator
({
message: 'This value is not valid', fields:
{
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
},
different: {
field: 'password',
message: 'The username and password can\'t be the same as each other'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password can\'t be the same as username'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password can\'t be the same as username'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
});
});
</script>

The username has been checked across three ways firstly your username should be between 6 and 30 characters. Secondly it should contain only alphabet letters no other characters allowed like numbers. And thirdly, it should not be empty. For email it is necessary that it should not be empty as well as a valid email. The password is a bit complex and tricky to check as it has many cases but validator handles it beautifully. Have a look at the password section, the password should not be empty, and it does not contain your username and it also check the confirm password.

This is all about demo but this is the start there are many complex things which are handled through the use of this validator script.

Final Output after implementing bootstrap validator.