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 !
