2 If the user didn’t enter anything into the textbox, the value of the input type will be null.. 3 The user didn’t enter anything into the textbox, an alert dialog box will appear on the
Trang 1Have you ever filled out a form to buy something, clicked the submit button, waited,
waited, and then received a big red message saying that the card number you entered
was invalid? And then after all that waiting, you had to retype the entire form because
all of the fields were reset? By letting JavaScript do some preliminary checking of the
form input for obvious mistakes and erroneous information, you can save the user a
lot of time and aggravation Then, after the preliminary checking is done, the form is
ready to go off to a server program, such as Perl or PHP, where it can be further
vali-dated and processed This section will show you a little about validating forms: doing
preliminary checking to see if a password is the correct length, making sure a field isn’t
empty, checking for unwanted characters, and more Chapter 17, “Regular
Expres-sions and Pattern Matching,” shows you how to validate the format for e-mail
addresses, credit cards, zip codes, names, phone numbers, Social Security numbers,
and the like by using regular expressions, a powerful pattern matching tool provided
by JavaScript
Checking for Empty Fields. Forms often have mandatory fields that must be filled
out before the form can be submitted The following example checks for empty fields
E X A M P L E 1 1 2 6
<html>
<head><title>An HTML Form and the onSubmit Event Handler</title>
<script type="text/javascript">
2 if(yourinfo.namestring.value == "" ||
yourinfo.namestring.value == null){
// Check for an empty string or null value
3 alert("Please type in your name");
} else{
} }
</script>
</head>
<body>
<b>
6 <form name="info" action="http://cgi-bin/bookstuff/form1.cgi"
method="post"
7 onSubmit="return checkForm(this);">
<big><p>
Continues
Trang 2Type your name here:
8 <input type="text" name="namestring" size="50">
</p>
9 <input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</big>
</form>
</body>
</html>
E X P L A N A T I O N
1 The function called checkForm() has one parameter, yourinfo, which is a reference
to the form defined on line 6
2 If the user didn’t enter anything into the textbox, the value of the input type will
be null The expression if(yourinfo.namestring.value == “”) checks for an empty
field
3 The user didn’t enter anything into the textbox, an alert dialog box will appear on
the screen, and after he presses OK, he will have a chance to fill out the form
again
4 If false is returned from this function, the form will not be submitted to the server.
5 If true is returned from this function, the form will be submitted to the server.
6 The HTML form starts here The form, document.forms[0], is named info The
ac-tion attribute contains the URL of the program that will process the form, a CGI
script on the server The method attribute defines the HTTP method that
deter-mines how the data will be sent to the server
7 The onSubmit event is an attribute of the HTML <form> tag It is triggered when
the user clicks the Submit button The event handler is a function called
check-Form() Its argument is this, same as document.forms[0] ) The return keyword is
required when using the onSubmit event handler One of two values will be
re-turned: either true or false.
8 The input type for this form is a text field box Its name is namestring and it can
hold a string of up to 50 characters
9 The input type is the Submit button When the user clicks this button, the
onSub-mit event handler on line 7 is activated See Figure 11.46.
E X A M P L E 1 1 2 6
Trang 3Checking for Alphabetic Characters. If checking input fields for alphabetic
characters, such as a user name, the following example will go through a loop evaluating
each character in a string to guarantee it is an alphabetic See Chapter 17 for more on
this type of validation
Figure 11.46 Using the onSubmit event handler to stop a form if the user didn’t
enter anything in the field.
E X A M P L E 1 1 2 7
<html>
<head><title>Verifying a Name</title>
<script type="text/javascript">
alert ("First name is invalid");
return false;
}
alert("Last name is invalid");
return false;
}
return true;
}
6 for (var i = 0; i < textField.value.length;i++){
/* alert(ch); Using alert to see what characters
are coming in
*/
8 if((ch < "A" || ch > "Z") && (ch< "a" || ch >"z")){
return false;
} } }
Continues
Trang 4else {
} }
</script>
</head>
<body bgcolor="lightgreen">
<font face=verdana>
<strong>
10 <form name="alphachk" onSubmit="return validate(this);">
Enter your first name:
<br />
11 <input name="first"
type="text"
size=60>
<p>
Enter your last name:
<br />
12 <input name="last"
type="text"
size=60>
<p>
13 <input type=submit value="Check it out">
<input type=reset>
</form>
</strong></font>
</body>
</html>
E X P L A N A T I O N
1 A JavaScript function called validate() is defined It takes one parameter, a
refer-ence to a form object.
2 The if expression invokes a function, called alpha(), and passes the text object to
it The first name is validated by the alpha() function If false is returned, the block
is entered and the user is alerted that he or she did not enter a valid first name If
this function returns false to the onSubmit handler that invoked it, on line 10, the
form will not be submitted
3 As in line 2, the alpha() function is being called, only this time to verify the last
name of the user
4 The function called alpha() is defined All the validation work is done here This
function will validate that the user entered something in the textbox, and that
what he or she entered is alphabetic characters, and only alphabetic characters,
either uppercase or lowercase
5 If the length of characters entered in the text field is not equal to 0, then the block
is entered
E X A M P L E 1 1 2 7 (C O N T I N U E D)
Trang 5Checking E-Mail Addresses. You are frequently asked to include your e-mail
address when filling out a form There are some requirements for a valid e-mail address
such as TommyTucker@somewhere.com One requirement is that there is an @ symbol
after the user name, and that there is at least one dot (.) in the address The following
example is a preliminary check for the existence of both of those characters, but it is far
from a complete check See Chapter 17 for a much more robust version of e-mail
vali-dation using regular expressions
6 The for loop is used to check each character, one at a time, that was entered in the
text field
7 The charAt() string method returns a character at a specified position in the
string Each time through the loop, a new character is assigned to the variable, ch.
8 This is the test for alphabetic characters Because each character is represented
in-ternally as an ASCII number, ( “A” is ASCII 65, “B” ASCII 66, etc.), any character
outside the range “A” to “Z” and “a” to “z” is not an alphabetic character
9 If true is returned by the alpha() function, the form will be submitted.
10 The name of the form is alphachk The onSubmit event is triggered when the user
clicks the Submit button on line 13
11 The input type is a text field, called first This is where the user will enter his or
her first name
12 The input type is a text field, called last This is where the user will enter his or
her last name
13 The input type is a Submit button When the user clicks this button, the onSubmit
event is triggered, and if the form was valid, it will be submitted to the server (In
this example, it isn’t going anywhere, because the action attribute of the form
wasn’t specified.) See Figure 11.47
Figure 11.47 The user enters a valid first name and an invalid last name.
E X P L A N A T I O N
Trang 6E X A M P L E 1 1 2 8
<html>
<head><title>Checking Email</title>
<script type="text/javascript">
2 if(form.address.value.indexOf("@") != -1 &&
form.address.value.indexOf(".") != -1){
alert("OK address!");
} else { alert("Invalid address");
} }
</script>
</head>
<body bgcolor="lightgreen">
<font face=verdana>
<b>
<div align="center">
5 <form name="mailchk"
action="http://cgi-bin/ml.pl"
method="post"
onSubmit="return email(this);">
Enter your email address:
<p>
6 <input name="address"
type="text"
size=60 />
</p><p>
7 <input type=submit value="Check it out" />
<input type=reset />
</p>
</form>
</div></b></font>
</body>
</html>
E X P L A N A T I O N
1 A JavaScript function called email() is defined It takes one parameter, a reference
to a form
2 If the string method, indexOf, does not return a –1, then the @ character and a dot
(.) were found in the value entered by the user in the textbox, and an alert
mes-sage will let the user know his or her e-mail address is okay This is where the
val-idation takes place
3 If true is returned, the form will be submitted.
Trang 7Checking Password Fields. There are a number of checks made on password
entries Does it have the right number of characters? Does it contain one numeric
char-acter? Can it contain upper and lowercase characters? The following example is a simple
validation routine to check for alphanumeric characters and that the number of
charac-ters in the password field is not less than six
4 If false is returned, the form is stopped, and will not be submitted.
5 The HTML form, called mailchk, starts here The onSubmit event will be triggered
when the user clicks the submit button on line 7
6 The form’s input type is a textbox named address that will hold up to 60 characters.
7 When the user clicks the submit button, the onSubmit handler on line 5 is
trig-gered It invokes the handler function, called email, and passes a reference to the
form as an argument See Figures 11.48 and 11.49
Figure 11.48 The user enters a valid e-mail address.
Figure 11.49 The user enters an invalid e-mail address A dot is missing in the address.
E X P L A N A T I O N
Trang 8E X A M P L E 1 1 2 9
<html>
<head><title>Verifying a Password</title>
<script type="text/javascript">
alert("Please enter a password");
return false;
}
3 if( form.pass.value.length < 6 ){
alert("Password must be at least 6 characters");
return false;
} for (var i = 0; i < form.pass.value.length;i++){
var ch= form.pass.value.charAt(i);
4 if((ch < "A" || ch > "Z") && (ch< "a" || ch >"z")
&& (ch < "0" || ch > "9")){
alert("Password contains illegal characters");
return false;
} }
5 alert("OK Password");
return true;
}
</script>
</head>
<body bgcolor="red">
<font face="verdana">
<b><div align="center">
6 <form name="passchk" onSubmit="return valid(this);">
Enter your password:
<br />
7 <input name="pass"
id="pass"
type="password"
size=33 />
<p>
<input type=submit value="Submit Password" />
<input type=reset />
</p>
</form>
</div>
</font>
</body>
</html>
Trang 911.6 What You Should Know
Any Web site that is trying to sell you something will have a form They are at the heart
of Web commerce This chapter focused on how to create forms and different input
devices used to collect the data, textboxes, checkboxes, drop-down menus, and so on
You learned how JavaScript can access this data and manipulate it; for example, how to
change the text in a box, verify that there was any input, stop a submission, open up
E X P L A N A T I O N
1 A JavaScript function called valid() is defined It takes one parameter, a reference
to a form
2 If the password entered by the user has a length of 0 characters, an alert message
is sent
3 If the password entered by the user has a length of less than 6 characters, an alert
message is sent
4 If the value of the password entered by the user contains any character that is not
an alphabetic character and not a number, an alert message is sent
5 If the password was at least 6 characters and contained only alphanumeric
char-acters (letters and numbers), then the validation test was passed, and the user is
alerted A value of true is returned to the onSubmit handler, allowing the form to
be submitted
6 The HTML form called passchk is started here Its onSubmit handler is triggered
when the user clicks the submit button
7 The input type is a password box, called pass This is where the user will enter his
or her password See Figure 11.50
Figure 11.50 The user enters a password of less than 6 characters (left) or enters a
password that contains illegal characters (right).
Trang 10another window and display the form data, do some simple validation, and so on After
going through this chapter, you should know:
1 What the DOM tree looks like to JavaScript
2 Why we use the Legacy DOM with forms
3 How to create HTML forms and input devices
4 What two methods are used to send data to a server
5 How the browser bundles up the input data
6 What name/value pairs represent in forms
7 What a server-side program does
8 How the form object and the elements object are used.
9 When to use the name and the id attributes How do they differ?
10 How to catch a form before it is submitted to a server
11 How to reference the input devices in a JavaScript function
12 How to stop form data from being submitted
13 How to program input devices/controls
14 How the this keyword is used with forms.
15 How the button input device differs from the submit button
16 How to use an event handler with a form
17 How the form’s submit() method differs from the onSubmit event handler.
18 How to change the text in a textbox with JavaScript
19 What the blur() and focus() methods do.
20 How to use multiple selects
21 How the selectedIndex property works with drop-down menus.
22 How to test for input that does not contain alphabetic data
23 How JavaScript can tell which button was selected in a list of radio buttons
E x e r c i s e s e e E x E x e r c i s e s d d d E e e e e e
Trang 111 What’s a BOM? What’s a DOM? What is the Legacy DOM and why is it used
with forms?
2 How does the name attribute differ from the id attribute of an input device?
3 Create an HTML document that contains two forms One form consists of a text
field, the other a text area Name the forms and the input devices Use Java-Script to print out the names and values in the forms
4 Add a button to the last example If the user clicks it, display the form content
in another window
5 Create two text fields In one text field, the user will enter his or her birth
month and day Write a JavaScript program that will print the number of days until his or her birthday in the second text field
6 Write a JavaScript function that will finish the story in Example 11.20
7 Write a multiple-choice quiz It has five questions and the user can only select
one answer After the user selects an answer, alert him or her if he or she is wrong, and show the user the correct answer in a separate textbox field
8 Change Example 11.36 so that a confirmation box will appear, asking the user
to confirm his or her vacation choices The vacation choices will be listed in a popup window
9 Create a form that uses a text input type Ask the user to type his or her name in
uppercase letters The submit button will be an image Validate that the form is not empty and that the user typed his or her name in only uppercase letters
Send the form to a server program if it is valid
10 Create a form with radio buttons representing different colors Use the id
attri-bute for each radio button In a JavaScript program, the getElementsById() will
return a reference to the radio button that was selected Change the background color to the color that was selected
E x e r c i s e s