JQuery validation – part 2 : using JQuery validation plugin .

Posted: December 1, 2009 in Jquery

Hi everyone ,

it’s my second tutorial about JQuery validation .. today we are gonna use the validation plugin ISA , we will cover more than one level dealing with this plugin as follows :-

  • Validation using validate() method with no arguments .
  • Validation using rules & messages for custom error message .
  • Some links !

1st level : Validation using validate() method with no arguments :-

<html>
<head>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js" ></script>
<script type = "text/javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" ></script>
<script type = "text/javascript" >
$(document).ready(function(){
$("#myForm").validate();
});
</script>
</head>
<body>
<form id = "myForm" >
<p > Username * : </p>
<input type="text" id = "username" class = "required"/>
<p > Email  : </p>
<input type="text" id = "email" class = "optional"/>
<p> Password * : </p>
<input type="text" id = "password" class = "required"/>
<input type = "submit" value = "Register" class = "submit" />
</form>
</body>
</html>

=> Here what did we do ?

  • As JQuery code : we ordered javascript to operate the validate() method on the form whose id = “myForm” when the DOM is ready .
  • As HTML code : we simply define the form inputs  and setting the class attribute to ” required ” for the required inputs and ” optional ” for the optional input ( here i assume that the username and password fields are required , but the email field is optional ) , don’t forget to set the class attribute for the submit button .

If you execute this code you may have a result like this :-

You can then customize the error css class that is applied to the message which appears above ” this field is required ” .

so add this css to your document’s head

<style>
.error{
color : red ;
padding-left : 3px;
}
</style>

We then add another attribute to the <input > tag to specify the minimum length for this field , this attribute is called minlength so update your <input>s like this :-

<input type="text" id = "username" class="required" minlength = "5"/>

If you tried to enter a username with length less than 5 chars you will get an error message css-classed with the error css class .

Till now no i think that is no problem at all .. every thing goes well .. we make our form > define out inputs or any field types , all what matters is the class attribute > write two JQuery lines and it’s done ! now we’ll go deeper and pass somethings to the validate() method .

2nd level : Validation using rules & messages for custom error messages .

As you may note , jquery’s validation plugin has its own error messages for leaving a required field or any other error , also it is difficult to some extent to set HTML attributes for every option you wanna apply , so we will try the second level by passing some arguments to the validate() method.

  • HTML code :
<p class = "fieldLabel> Username * : </p>
<input type="text" id = "username" name = "username"/>
<p class = "fieldLabel" >Enter your email </p>
<input type = "text " name = "email1" id = "email1" />
<p class = "fieldLabel" >Re-enter your email </p>
<input type = "text " name = "email2" id = "email2" />
<p class = "fieldLabel" >Enter your comment * : </p>
<textarea name = "comment" id = "comment"></textarea>
  • JQuery code :
$(document).ready(function(){
$("#myForm").validate({
   // specify some rules
   rules :{
      username : {
         required : true,      // username is a required field
         minlength : 3         // its minimum length is 3 chars
      },
      email1 : {
         required : true,
         email : true          // this field must has an email format
      },
      email2 :{
         required : true,
         email : true,
         equalTo : '#email1'   // this field must be equal to the element with id #email1
       },
       comment : {
         required : true,
         minlength : 20
       }
   },
   // messages that will appear if the previous rules were not true
   messages : {
      username : {
         required: ' Please enter a username ',  // if this field was left blank this message will appear
         minlength: ' you have to enter 3 charecters at least ! '
      },
      email1 : {
         required : 'this field is required',
         email : 'Not valid email format'
      },
      email2 : {
         required : 'this field is required',
         email : 'Not valid email format',
         equalTo : 'The two email fields must be identical'
      },
      comment : {
         required : 'sorry .. please enter your comment !',
         minlength : "this field's length must be 20 at least"
      }
   },
   errorClass : 'error',    // what css class will be applied to the errors ?
   // if all fields are valid just execute this function
   // this argument label refers to the error label element and is a label object
   // this is identical to label = getElementById("#someLabel");
   success : function(label){
                   label.addClass("valid").html("<b>this is a valid input !</b>");
   }
});

Note : we can manipulate out “valid ” css class and make it contain an image like this , look  the JQuery’s css example about this :

.valid {
	background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
	height:16px;
	width:16px;
	display: block;
	position: absolute;
	top: 4px;
	left: 152px;
}

3rd level : Some links !

About some tricks you may have to read the manual yourself .. really useful .

The second link of course is here .. just follow me on twitter and you will be noticed if any validation or any other tutorial was added !

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s