Articles → Jquery → Form Validation In Jquery

Form Validation In Jquery

If you are working on a web application which contains registration page, change password page, login page and so on then form validation is indispensable. If you are sure that the user hits the website from a JavaScript enabled browser then form validation using jQuery is an efficient way. In this tutorial I will work on a forgot password page apply required field and email validations.

Forgot Password Screen

Click to Enlarge

Before I start working on the validation part let me brief you some information about the controls. The textbox ID is txtEmailID and Retrieve Password button ID is btnRetrievePassword.

Now let us add a ready function before the html code

$(document).ready(function() {});

Inside the ready function I will add a click event handler for the button so the above code is changed to

$(document).ready(function() {
	$("#<%= btnRetrievePassword.ClientID %>").click(function() {});
});

First of all add a required field validation for email id. For that jQuery has provided a

jQuery.trim(<textbox_text>.length

If the textbox does not contain any text or the textbox contains only white spaces then the above expression returns zero. So for required field validation jQuery code is changed to

$(document).ready(function() {
	$("#<%= btnRetrievePassword.ClientID %>").click(function() {
		var emailText = $("#<%= txtEmailID.ClientID %>").val();
		if(jQuery.trim(emailText).length == 0) {
			//  Write a logic to handle it
		}
	});
});

If the textbox contains some value then second thing we can do is to apply email validation. Email validation is done using regular expressions. We can do other validations like name validation, phone number validation etc using the same method

First of all we require regular expression for email.

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

Once we have regular expression our other requirement is - we need a method that can match the pattern with the value. jQuery has provided test() method to match the pattern. Now we add email validation code in the sample code above

$("#<%= btnRetrievePassword.ClientID %>").click(function() {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	var emailText = $("#<%= txtEmailID.ClientID %>").val();
	if(jQuery.trim(emailText).length == 0) {
		//  Write a logic to handle it
	} else if(!emailReg.test(emailText)) {
		//  Write a logic to handle it
	}
});

If the pattern matches then test() method will return true else false.

Summary

jQuery is an easy way to apply form validation. But the programmer should make sure that JavaScript is enabled before using this technique.

Posted By -	Karan Gupta

Posted On -	Saturday, December 24, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**