JavaScript Validation

JavaScript can be used to validate data in the HTML documents before sending the content to the server. Validation occur at server side when client had entered data successfully and pressed submit button.

We can use validation for some fields such as:

to check whether required field is empty ?
to check whether user has entered valid email address.
to check whether user has entered valid date.
to check whether user has entered text in numeric filed.

JavaScript Validation Syntax

function validate()
{
   var value;
   if(value==null || value=&quot; &quot;)
   {
      alert(msg);
      return fasle;
   }
   else
   {
      return true;
   }
}

JavaScript Validation Example

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>validation</title>

<script type="text/javascript">
	function validate() {
		var a = document.forms["myform"]["fname"].value
		if (a == null || a == "") {
			alert("Please enter the Name..!");
			return false;
		} else {
			alert("Successful validation...!");
		}
	}
</script>
</head>
<body>
	<form name="myform">
		Enter Name: <input Type="text" name="fname" />
		<input type="button" onclick="validate();" value="submit" />

	</form>
</body>
</html>

var a = document.forms[“myform”][“fname”].value this line creates variable which has equal value of fname value.
if (a == null || a == “”) line contains OR sign which tells if value is null or empty display the alert message. If input field is empty it returns false.
If value is null and not declared , the it will display alert box saying please enter the name or if it is entered by value, then it will display successful validation.
<input type=”button” onclick=”validate();” value=”submit” /> tag contains submit event when user clicks the submit button and onclick() mouse event handler triggers when user clicks the mouse button once.

JavaScript Validation Demo

Save the file as validation_example.html in your system.
Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Now don’t enter any value and click on submit button the following alert message appears:

Now enter some name and click on submit button the following output appears:

JavaScript E-mail Validation

The following example shows JavaScript E-Mail validation.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>mail_validation</title>
<script>

function validate()
{
var a=document.forms["myform"]["email"].value;
var atpos=a.indexOf("@");
var dotpos=a.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=a.length)
{
	alert("Invalid email address");
	return false;
}
else {
	alert("Valid email address..!");
}
}
</script>
</head>
<body>
	<form name="myform" action="">
		Enter email: <input type="text" name="email" />
		<input type="button" onclick="validate();" value="submit" />
	</form>
</body>
</html>

var a = document.forms[“myform”][“email”].value this line creates variable which has equal value of email value.
var atpos=a.indexOf(“@”); which contain in-built function called indexOf() which will search text for us. It is used to check if mail contains @ sign.
var dotpos=a.lastIndexOf(“.”);which contain in built function called lastIndexOf() which will search for dot at end of email id like .com.
if(atpos<1 || dotpos<atpos+2 || dotpos+2>=a.length) line tells that atpos<1 requires atleast one character should be there before email address ,dotpos<atpos+2 requires atleast one character between @ sign and the dot and dotpos+2 requires there should be atleast one character after the dot.
<input type=”button” onclick=”validate();” value=”submit” /> tag contains submit event when user clicks the submit button and onclick() mouse event handler triggers when user clicks the mouse button once.

Example Application Test

Save the file as mailValidation_example.html in your system.
Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Now don’t enter any value and click on submit button the following alert message appears:

Now enter some name and click on submit button the following output appears:

Now enter a valid email address and click on submit button the following output appears:

JavaScript Validation Syntax

JavaScript Validation Example

JavaScript Validation Demo

Now don’t enter any value and click on submit button the following alert message appears:

JavaScript E-mail Validation

Example Application Test

Now don’t enter any value and click on submit button the following alert message appears:

About Krishna Srinivasan