How to use jquery validations for web site forms

form validation with validate.js

Step by step guide for form validation process with a javascript library

The web form is an essential part of web site designing. No dout about that, Almost every web site has a contact form or any other optional forms for user interactions with the web site.

So that, Here i thought to share a best practice on web form fields Validations with validate.js libarary. So it has become more easy with this jQuery validate plugin . so that i thought to share this quick tutorial on web form validations. this so quick and easy to use.

Just  only 3 easy and quicksteps. No more talks, Lets get started,

 

Tutorial Summary

1.  Link  jQuery library & validation library file on web page header tags.

2. Add document.ready jQuery headers to the head tags.

3. Rule as you want to validate each (more advance validating rules)

 

Step 01

Link jQuery library & validation library file on web page header (inside the <head></head> tags).

<script src="//code.jquery.com/jquery-1.9.1.js"></script><script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 02

Defining jQuery document.ready event at bottom of the web page header (bellow the above code, and before </head> tag).

<script>// <![CDATA[
 
  $(document).ready(function(){  
	// Your Code : Step 03
   });
// ]]></script>

 

Step 03

Rule as you want to validate each (more advance validating rules)

<script>// <![CDATA[
  
  $(document).ready(function(){  
	 
          $("#myform").validate({ // #myform -> set your form id 
             rules: {
                name: "required",  // change "name"-> set your text input id here 
                age: "required",
                email: {
                        required: true,  // set your own rule here 
                        email: true
                       },
                password: {
                        required: true,
                        minlength: 5
                       },
                agree: "required"
             },
             messages: {
                firstname: "Please enter your first name",
                lastname: "Please enter your last name",
                password: {
                        required: "Please provide a password",
                        minlength: "Password must be at least 5 characters long"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }, 
             submitHandler: function(form) {
                  // custom code on form submit event (this is optional)
                  // finally submit function call 
                  $(form).submit();
             }
});
// ]]></script>

Easy as 1,2,3 right?, just give a try on your next project if you are a productive web developer. Good luck ! Subscribe for more Tips.. Keep in touch !

Madhura darshana

I'm a professional Freelancer specializing in web development, web site designing and developing web applications. Connect with me on Twitter @codydmd. Facebook.

You may also like...