Html basics 11 form validation

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);
{
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[0].text="h1";

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

{
objForm.Type.options[0].text="m1";


}

{
objForm.Type.options[0].text="v1";



}

}

}
// -->
</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

Html basics 11 form validation

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Html basics 11 form validation (20)

More from H K (20)

Recently uploaded (20)

Html basics 11 form validation