Javascript Form validation Example

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

Javascript Form validation Example

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