|
jQuery to validate Email
Address
In this jQuery tutorial we will develop a program that validate
the email address from server and displays on the user browser. In this example
we will be calling a server side PHP script to get the "result". You
can easily replace PHP with JSP, or ASP program.
Steps to develop the program for Email Address Validation
Step 1:
Create php file to that prints the current server data. Here is the code of
PHP script (emailValidation.php).
<?
$email = $_GET['email'];
function isValidEmail($email){
return eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email);
}
if($email=="")
{
$errormsg="error1";
}
if(!isValidEmail($email) && $email!="")
{
$errormsg="error2";
}
echo $errormsg;
?> |
Step 2:
Write HTML page to call the emailValidation.php. Create a new file (emailvalidation.html)
and add the following code into it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
.error{
color:red;
}
</style>
<title>E-Mail Validation</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function emailValidate()
{
email = document.getElementById("email").value;
$.ajax({
url : "emailvalidation.php?email="+email,
success : function (data) {
if(data=="error1")
{
document.getElementById("erroremail").innerHTML=
"Please enter email."; }
else if(data=="error2")
{
document.getElementById("erroremail").innerHTML=
"Please enter valid email."; }
}
});
}
</script>
</head>
<form name="emailvalidate" action="" method="post" >
<div><input type="hidden" name="query" value="" /></div>
<table>
<tr><td colspan=2> <div id="errormsg"></div></td></tr>
<tr>
<th align="left"><label for="email">Email</label></th>
<td><input type="text" id="email" name="email" size="20" />
</td>
<td id="erroremail" class="error"></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="Submit" value="Submit"
onClick="emailValidate();"/></td> </tr>
</table>
</form>
</html> |
Program explanation:
The following code includes the jQuery JavaScript library file:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
On Click on the Button emailValidate() funcation is called:
<input type="button" name="Submit"
value="Submit" onClick="emailValidate();"/>
The code
$.ajax({
url : emailValidation.php
...
makes ajax call to emailValidation.php file get the Text parameter
"email".
This file call the ValidEmail($email) this match with regular expression
return error messages ;
Following code intercepts the ajax call success and then sets the data into
"erroremail" div:
success : function (data) {
if data equals to "error1" It means You
not entered the E-mail Address;
if data equals to "error2" It means You
not entered the valid E-mail Address;
}
});
When you run the program in browser it will look like following screen shot:
Check online
demo of the application
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
