Lecture 17

You will learn in this Lecture 

FormValidation
	- Text Box validation
	- Check Box validation
	- Password validation
	- select list box validation

Before starting with this lecture, There are few questions that deserve to be answered, What is validation and Why is it requried? Let me answer the first question and then we will move on to the second question.

So, the first question is, What is validation?
Validation test for required strings contain a specific value, a range of accepted value or a pattern of acceptable format. For example, If you make a form, and ask the user to enter name, email address, and comment. If he leaves every field blank, and click Enter. You will not get any information. 
This means we are validating (checking) the values entered by the user, if he has entered some value or not, if not, then ask him to enter the value and if he has entered wrong value,then ask him to enter the correct value. 

I hope you must have got the answer,  why validation is required.

Next question is How validation is done, just read the following lines.

So, as soon as the user clicks Enter, There are two possibilites

1. Send the data that use has entered to the server, and check the values, if there are any, if there are no values entered by him or if wrong values are entered by him, ask him to enter the value, and move back to the same form.

2. Or, before sending the data to the server, check whether user has entered any value or not. If he has entered the value, then the value is corrent or not. 

Second method is what we will follow, and is called as client side scripting, whereas the first method is called as Serve side scripting. JavaScript is popular for client side scripting and ASP, JSP, PHP are popular for server side scripting. It is high time to understand the difference between Client Side Scripting and Server Side Scripting.

When we use a scripting language, that works on the server side, it is called as Server Side Scripting language, 
If we use a scripting language, that works on client side (i.e. browser), it is called as Client Side Scripting language.

So, Now let us start with validating user input. 

When we make a form, we ask the user to enter username, password, and may ask him to fill up some check boxes, radio butons, and also ask him to write some comments. It is compulsay for the user to enter username, and password, but it is not compulsay for him to give his comments. So the things that are compulsary, cannot be left blank. This is one of the validation, forcing the user not to leave a field blank.

Let me list down some of the common validations needed
- Password Validation
- Text Field not blank (Name)

Below is the code for Text Box validation
<html>
<head>
	<script language="JavaScript">

	function validate()
	{
		firstName=document.myForm.fname.value;
		lastName=document.myForm.fname.value;
		if(firstName=="")
			window.alert("Name Field cannot be left blank");
		if(lastName=="")
			window.alert("Name Field cannot be left blank");
		switch (firstName.charAt(0))
		{
			case "0":
			case "1":
			case "2":
			case "3":
			case "4":
			case "5":
			case "6":
			case "7":
			case "8":
			case "9": window.alert("First chaaracter cannot be a number");
		}
	}
		
	</script>
</head>
	<body>
		<form name="myForm">
			<input type="text" name="fname"> <br>
			<input type="text" name="lname"> <br>	
			<input type="submit" onClick="validate()"> <br>
		</form>
	</body>
</html>

And, Now we have the code for Password Validation
<html>
<head>
	<script language="JavaScript">

	function validate()
	{
		passwd=document.myForm.pass;
		cpasswd=document.myForm.cpass;
		if (passwd=="")
			window.alert("Password field cannot be blank");
		if (cpasswd=="")
			window.alert("Confirm Password field cannot be blank");
		
		if (passwd!=cpasswd)
			window.alert("Passwords dont match");
	}
		
	</script>
</head>
	<body>
		<form name="myForm">
			Password<input type="password" name="pass"> <br>
			Confirm password<input type="password" name="cpass"> <br>	
			<input type="submit" onClick="validate()"> <br>
		</form>
	</body>
</html>

Validate Selection List

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validateForm(objForm)
{
	var returnStatus = 1;

	if (objForm.Make.selectedIndex == 0) {
		alert("Please select a car make");
		returnStatus = 0;
	}
	else
		alert("You selected" + objForm.Make.options[objForm.Make.selectedIndex].text + objForm.Make.value);

	if (returnStatus) {
		objForm.submit();
	}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="test.asp" NAME="testform">
<SELECT NAME="Make">
	<OPTION VALUE="0" SELECTED>Select One</OPTION>
	<OPTION VALUE="1">Ford</OPTION>
	<OPTION VALUE="2">Chevy</OPTION>
	<OPTION VALUE="3">Pontiac</OPTION>
	<OPTION VALUE="4">Dodge</OPTION>
</SELECT>	
<INPUT TYPE="BUTTON" VALUE="Send form"
onClick="validateForm(document.testform)">
</FORM>
</BODY>
</HTML>

Dynamically Populating a Selectin List

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function populate(objForm)
{

	if (objForm.Make.selectedIndex == 0)
	{
		alert("Please select a car make");
	}
	else
	{
		alert("You selected" + objForm.Make.options[objForm.Make.selectedIndex].text + objForm.Make.value);
		if (objForm.Make.selectedIndex == 1)
		{
			objForm.Type.length=2;
			objForm.Type.options[0].text="d1";
			objForm.Type.options[0].value="1";

			objForm.Type.options[1].text="d2";
			objForm.Type.options[1].value="2";
		}

		if (objForm.Make.selectedIndex == 2)
		{
			objForm.Type.length=2;
			objForm.Type.options[0].text="h1";
			objForm.Type.options[0].value="1";

			objForm.Type.options[1].text="h2";
			objForm.Type.options[1].value="2";
		}

		if (objForm.Make.selectedIndex == 3)
		{
			objForm.Type.length=3;
			objForm.Type.options[0].text="m1";
			objForm.Type.options[0].value="1";

			objForm.Type.options[1].text="m2";
			objForm.Type.options[1].value="2";

			objForm.Type.options[2].text="m3";
			objForm.Type.options[2].value="3";
		}

		if (objForm.Make.selectedIndex == 4)
		{
			objForm.Type.length=4;
			objForm.Type.options[0].text="v1";
			objForm.Type.options[0].value="1";

			objForm.Type.options[1].text="v2";
			objForm.Type.options[1].value="2";

			objForm.Type.options[2].text="v3";
			objForm.Type.options[2].value="3";

			objForm.Type.options[3].text="v4";
			objForm.Type.options[3].value="4";
		}

	
	}

	
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="test.asp" NAME="testform">
<SELECT NAME="Make" onChange="populate(document.testform)">
	<OPTION VALUE="0" SELECTED>Select One</OPTION>
	<OPTION VALUE="1">Daewoo</OPTION>
	<OPTION VALUE="2">Hyundae</OPTION>
	<OPTION VALUE="3">Mercedes</OPTION>
	<OPTION VALUE="4">Volswagen</OPTION>
</SELECT>	

<SELECT NAME="Type">
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Send form"
onClick="validateForm(document.testform)">
</FORM>
</BODY>
</HTML>

Validating a Check Box