Validations using jQuery databValidator

Hello Developers, I am going to show you Validations using jQuery databValidator.

When We include forms on our website, it is always perform some validation on the data entered.

Validating form is very important during form submission.

In this article, we’ll look at how client side validation can be done using jQuery.
It is very easy to validate user.

Please follow below steps:

Step 1: Put css and js in the head section of your HTML file.

Here form id is needed. which we will used in our html form.

Required JS and CSS can be downloaded from below link

1. Bvalidator CSS
2. Bvalidator JS
3. jQuery
<link href='css/bvalidator.css' rel='stylesheet'>
<script src=" js/jquery-1.11.1.min.js "></script>
<script src="js/jquery.bvalidator.js"></script>
<script type="text/javascript"> 
    $(document).ready(function () {
    $('#frm').bValidator();   
    });
</script>

Step 2: Create simple HTML form.

To create the form use the following code.

<form id="frm" action=””>	
         <input type="text"  placeholder="First Name" name="fnm" data-bvalidator="required,alpha"/><br/>

	 <input type="text"  placeholder="Email"  name="email" data-bvalidator="required,email"/><br/>

	 <input type="password" placeholder="Password"  name="pass" id="pass" data-bvalidator="minlength[8],required" /><br/>

	 <input type="password" placeholder="Confirm Password" name="cpass" data-bvalidator="equalto[pass],required"/><br/>

         <input type="text" placeholder="Date of Birth"  name="dob" data-bvalidator="required"/><br/>

	 <input type="text” placeholder="Mobile Number" maxlength="10" name="mno" data-bvalidator="minlength[10],required,digit"/><br/>

	 <div class="signup-submit"><input type="submit" name="signup" value="Submit"/></div>
</form>	

In your form input simply pass this method. You can see output.

  1. For the First name field, that will ensure the characters only.
  2. Email rule that will ensure the value entered is a valid email.
  3. Password field has an added rule that ensures its minimum length is 8 characters.
  4. Confirm password will must take value of password.
  5. Dob will required field.
  6. Mobile number will must ensure only at least 10 characters.
  7. Here we should not added any function. so it has very easily validate by user.

I hope this article is important for you.

Blog Catagory : jQuery