Home Javascript Javascript Form validation Example

Related Tutorials


 
 

Share on Google+Share on Google+

Javascript Form validation Example

Advertisement
In this section we will discuss about how to validate your application form in javascript.

Javascript Form validation Example

In this section we will discuss about how to validate your application form in javascript.

In many applications data is accepted through the application form. To specify that the data which has been inserted is correct or not you will be required to validate your form. Here I am giving a simple example for form validation using Javascript.

Example

In this example I have created a html file into which I have created a three text field for accepting the data. I have validated this form according to the fields what they will accept the data. Such as for mobile number field data must be the number and not less than 10 digit, the email field will accept the data which must contain the character '@' and dot (.). And the character @ must not be the first character and the last dot must at least be one character after the @.

Source Code

formValidationExample.html

<html>
<head>
<title>Form Validation Example</title>
<script type="text/javascript">
function formValidator()
{
var nm=document.forms["form1"]["name"].value;
var em = document.forms["form1"]["email"].value;
var atpos = em.indexOf("@");
var dotpos = em.lastIndexOf(".");
var mn = document.forms["form1"]["mob"].value;
var mobNumLen = document.forms["form1"]["mob"].value.length; 
if(nm == "" || nm == null)
{
alert( "Name Field must not be empty" );
document.form1.name.focus() ;
return false;
} 
if(em == null || nm=="")
{
alert("Email field must not be empty");
document.form1.email.focus();
return false;
} 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=em.length)
{
alert("Enter proper e-mail address");
document.form1.email.focus();
return false;
}

if(mn == "" || mn == null || isNaN(mn) ||
mn.length < 10 || mn.length >10 )
{
alert( "Mobile Number must be in the format ##### and of minimum 10 digits" );
document.form1.mob.focus() ;
return false;
} 
return( true );

}
</script>
<body>
<form action="success.html" name="form1" onsubmit="return formValidator();">
<table border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>EMail</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input type="text" name="mob" /></td>
</tr> 
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

success.html

<html>
<head></head>
<body>
Your Data is submitted successfully.
</body>
</html>

Output

When you will run the formValidationExample.html then the output will be as follows :

When you will click on the submit button if either of the text field is empty then the an alert box will be alert with the specified message

Download Source Code

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 31, 2012

Related Tutorials

Discuss: Javascript Form validation Example  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com