- SPLessons

Examples BootstrapValidator

Home > > Tutorial
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Examples BootstrapValidator

Examples BootstrapValidator

 
Description :
Hi, Every one Today we are going to see how to integrate BoostrapValidator to forms.

Step1 :
  1. Most of settings can be set via HTML5 attributes prefixed with data-bv.
  2. First we have to include the bootstrapvalidator.css and bootstrapvalidator.js into our page.
[html] <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/bootstrapValidator.min.css"/> <!-- BootStrap Validator CSS --> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrapValidator.js"></script> <!-- BootStrap Validator JS --> [/html]

 

Step2 :
There are so many ways we can integrate BootStrapValidator with our forms. In this article we will see a very simple way of BootstrapValidator integration. Some people are more scared about using of JavaScript Or jQuery so we can reduce the usage of the jQuery code with help of the BoostrapValidator and will do lot of complex validations with It.

 

Step3 :
Here I am just taking a very simple example form with a single field and see how it is easy to use the BootStrapValidator with our form. In the bellow form I just added an ID "ValidationForm" to the form.

Step4 :
If you see the line number 2, I just added a data-bv-feedbackicons-valid="glyphicon glyphicon-ok"  It's HTML5 attribute and here we are telling to BootStrapValidator which image it should use if the user enter a valid data. " glyphicon glyphicon-ok " is icon which will available in the BootStrap bundle.

Step5 :
 data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"  here we are telling to BootstrapValidator to use the " glyphicon glyphicon-remove " icon when the user entered an invalid data.

Step6 :
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh" here we are specifying to BootrapVlidator to use Refresh icon from Bootstrap Bundle.

Step7 :
  • Now coming to input tag we just add 5 HTML5 attributes to the input tag and we will see one by one attribute what they will do.
  • Line number 8, here we are telling to BootStrapValidator please make the email field should not empty.
  • Line number 9, here we are telling to BootStrapValidator please show the following message to user if the email field is empty.
  • Line number 10, here we are telling to BootStrapValidator please accept only the valid email address in this field.
  • Line number 11, here we are telling to BootStrapValidator please show the following message to the user if the user enter an invalid email address.

[html] <form id="ValidationForm" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"> <input type="text" class="form-control" name="email" data-bv-notempty="true" data-bv-notempty-message="The email address is required and cannot be empty" data-bv-emailaddress="true" data-bv-emailaddress-message="The email address is not a valid" /> <button type="submit" class="btn btn-default">Validate</button> </form> [/html]

Step:8 :
Please add the below jQuery code to your form. Don't get panic here we are going to use a single line of jQuery code that's the power of BootStrapValidator.js. Please remember that we have to have this jQuery line otherwise BootStrapValidator will not work. Here if you see the line number 2, we are adding the boostrapValidator() function with the help of form ID named as "#ValidationForm" [javascript] $(document).ready(function() { $('#ValidationForm').bootstrapValidator(); }); [/javascript]