codescracker


javascript

JavaScript Validations



« Previous Tutorial Next Tutorial »


As you have learned already about the JavaScript Form Validation. Now let's take a look at the following example, helps you to understand the process of validation:

<html>
<head>
	<title>JavaScript Validations</title>
	<script type="text/javascript">
		<!--
		// JavaScript validation code will come here
		//-->
	</script>
</head>

<body>
<form action="test.php" name="JavaScriptValidation" onsubmit="return(validateFun());">
	<table cellspacing="2" cellpadding="2" border="1">
	<tr>
		<td align="right">Name</td>
		<td><input type="text" name="username" /></td>
	</tr>
	<tr>
		<td align="right">EMail</td>
		<td><input type="text" name="useremail" /></td>
	</tr>
	<tr>
		<td align="right">Zip Code</td>
		<td><input type="text" name="userzip" /></td>
	</tr>
	<tr>
		<td align="right">Country</td>
		<td>
		<select name="usercountry">
			<option value="-1" selected>[choose]</option>
			<option value="1">INDIA</option>
			<option value="2">USA</option>
			<option value="3">UK</option>
			<option value="4">CANADA</option>
		</select>
		</td>
	</tr>
	<tr>
		<td align="right"></td>
		<td><input type="submit" value="Submit" /></td>
	</tr>
	</table>
</form>

</body>
</html>

Now, here we are going to create a JavaScript validation code to validate the input data. Here is the implementation of the function validate():

<script type="text/javascript">
	function validateFun()
	{
		if(document.JavaScriptValidation.username.value == "")
		{
			alert("Name must be entered.");
			document.JavaScriptValidation.username.focus();
			return false;
		}
		if(document.JavaScriptValidation.useremail.value == "")
		{
			alert("EMail must be entered.");
			document.JavaScriptValidation.useremail.focus();
			return false;
		}
		if(document.JavaScriptValidation.userzip.value == "" || isNaN(document.JavaScriptValidation.userzip.value) || document.JavaScriptValidation.userzip.value.length != 5)
		{
			alert("Zip must be provided in the form #####");
			document.JavaScriptValidation.userzip.focus() ;
			return false;
		}
		if(document.JavaScriptValidation.usercountry.value == "-1")
		{
			alert("Country must be selected.");
			return false;
		}
		return(true);
	}
</script>

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test