P. 1
My Website is Better Than Yours

My Website is Better Than Yours

|Views: 977|Likes:
Published by Eliot Ness
Test of second document
Test of second document

More info:

Published by: Eliot Ness on May 16, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

04/09/2012

pdf

text

original

An HTML form provides text and other input fields that let the user enter data
in a Web page. When the form is submitted, it is processed on the server and the

CHAPTER 9: VALIDATING USER FORM INPUT

132

data is used in whatever way is required, such as placing an online order or enter-
ing information in a guest book. In many situations, entry of incorrect data will
cause problems on the server, so you would like to check the data that the user
enters and verify that it is okay before submitting it. This process is called validation.
There are two parts to validation:

1.Checking the data and displaying a message to the user if there is an error.

2.Preventing form submission if the validation fails.

We’ll look at both of these tasks here.
There are many different kinds of validation that may be required, most of
which apply to text fields where the user will be typing in data. Here are some com-
mon examples of things that you might want to verify for a form field:

•The field is not empty.

•The field contains a number.

•The field contains an email address.

•The field data is a certain length, such as 16 characters.

•The field data is a member of a certain list, such as a list of the state abbrevia-

tions.

•The field data is a valid telephone number.

I’ll present example of the first two types of validation here.
To verify that the field is not empty, we can look at the length of the text in the
field. As long as this length is greater than 0, you know the field is not empty. You
also need to check that the field data is not null, a special JavaScript keyword that
means “invalid data.” Here’s a function for the job:

function isNotEmpty(field)
{var data = field.value;
if (data == null || str.length == 0)
{alert(“The field may not be left empty.”);
return false;

}else
{return true;
{

}

133

CHAPTER 9: VALIDATING USER FORM INPUT

Verifying that a field contains a number is a bit more complicated. The strate-
gy is to look at each character of the data and make sure the following requirements
are met:
•The character - (minus sign) is permitted but only if it’s the first character.

•The character . (decimal point) is permitted but only once.

•The digits 0 through 9 are permitted without restriction.

The function shown here does the job:

function isNumber(field)
{

var data = field.value;
var isNumber = true;
var alreadyHasDecimal = false;
var c;
for (var i = 0; i < data.length; i++)
{c = data.charAt(i).charCode(0);
if (c == 45) // code for a minus sign.
{if (i == 0) //OK at first position.
continue;

else
{isNumber = false;
break;

}

}if (c == 46) //code for decimal point.
{if (!alreadyHasDecimal)
{alreadyHasDecimal = true;
continue;

}else
{isNumber = false;
break;

}

}if (c < 48 || c > 57) //Codes for the digits.
isNumber = false;

}

134

CHAPTER 9: VALIDATING USER FORM INPUT

if (isNumber)
return true;

else
{alert(“The field does not contain a valid number.”);
return false;
}

}

These two validation functions give you the general idea for other kinds of val-
idation—write a function that checks the data in a field and returns trueif the data
is okay, falseif not. But how then do you combine all these validation functions in
a page so that all the form data is validated and the form is submitted only if all val-
idation tests are passed?

First, write a master validation function that calls all the individual validation
functions that are needed. For example, you might need to call isNotEmpty()on
several text fields and isNumber()on several others. The master function must
return falseif any of the individual validations failed and true only if none of them
failed.

The answer lies in the

tag. Normally a form is submitted when the
Submit button is clicked. But if you put code in the button’s onsubmitevent proce-
dure that returns the value false, the submission is aborted. If the return value is
true, the submission goes ahead normally. Thus, the tag will look like this
(scriptname is the name of the server script to which the form is being submitted):

scriptname” onsubmit=
“return validateAll(this);”>

Here’s how it works. When the
user clicks the Submit button, the
onsubmitevent is triggered and the
validateAll()function is called. The
argument thisis a JavaScript keyword
that provides a reference to the cur-
rent form. Code in the validateAll()
function calls the individual valida-
tion functions as needed and returns
trueor falseto the event handler. If
trueis returned—if all validation was
okay—the submission continues. If
falseis returned, the submission is
halted so the user can fix the data.

FFiigguurree 99..44.. A forms page with data validation.

135

CHAPTER 9: VALIDATING USER FORM INPUT

Listing 9.3 presents the HTML code for a Web forms page that uses this valida-
tion technique. Figure 9.4 shows the page after data has been entered and Submit
clicked. Because the user entered a word for his age rather than a number, the indi-
cated message is displayed and the form is not submitted.

LLiissttiinngg 99..33..An HTML document that uses the validation techniques presented n the text.



Testing validation



onsubmit=“return validateAll(this);”>

First name: size=“20”>

Last name:

size=“20”>

Age:


 

137

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->