Checking for Input
Because JavaScript is object-oriented, it treats every HTML form element--each button, selection box, text field, and even the form itself--as a separate object containing its very own data. With JavaScript, you can examine any HTML object's data right on the user's machine and make decisions based on the results. For instance, using field-level validation, you can make sure a user enters numbers in a field.
To perform field-level validation, you need to define a JavaScript function that contains validation logic, and then trigger that function whenever a user leaves (tabs or clicks away from) a certain HTML field. Typically, this means calling your function using an onChange (which detects when the user changes fields) or an onBlur (which detects when a user leaves, or "blurs," a certain field) event handler associated with the HTML text element.
To show how this works, let's ask users to pick the number of new brains they want to sponsor. Then we'll check to make sure they enter a value.
First, we'll define a function called exists() (as in, "Does user input exist or not?").
function exists(userEntry, message) {
The exists() function accepts two parameters. The first, "userEntry," represents the value to be validated for existence. The other, "message," represents an error message to display on the screen if the value doesn't exist.
Next, we'll declare two variables--one called aCharExists and one called entry--with the keyword var.
var aCharExists = 0;
var entry = userEntry;
The aCharExists variable is our yes/no variable. If the user does enter data, we'll set it to a value of 1 for yes. If the user doesn't enter data, we'll leave it a 0 for no. We'll store whatever characters the user types in the variable entry.
JavaScript variables are very loosely typed, which means you don't have to immediately specify what type of value (numeric, character-based, or otherwise) you expect the variable to contain in the variable declaration. Instead, variables are typed implicitly every time you assign a value to them. For instance, aCharExists is assigned a value of 0, so its implied type is numeric.
An if statement comes next in the exists() function:
if (entry) {
for (var i=0; i<entry.length; i++) {
//spaces don't count as "existence"
if (entry.charAt(i) != " ") {
aCharExists = 1;
}
}
}
The preceding if statement ensures that a value containing only spaces doesn't count as a real value. The flow of logic goes something like this:
if(entry) {
If a value for entry exists, then...
for (var i=0; i<entry.length; i++) {
//spaces don't count as "existence"
if (entry.charAt(i) != " ") {
aCharExists = 1;
}
}
}
Step through the value, examining one character at a time. The var i=0 command sets up a counter. As long as i is less than the number of characters in entry (as reported by the length property), we check to make sure a nonspace character is at character number i. In addition, if (entry.charAt(i) !=" " translates to "If character number i is not equal to a space..." If a character exists, we set the variable aCharExists to 1 (meaning, "Yes, a character exists"). Then we go back and do it again until we've checked every character in entry.
Finally, the meat of the function:
if (!aCharExists) {
alert(message);
}
}
This says that if aCharExists is false (as in the above example, the ! means "false," or "not"), we pop up an alert message.
Once we define the exists() function, it can be called from an event handler associated with an HTML element, as below:
What type of brain do you want? (r=right/l=left)
<INPUT TYPE="text" NAME="typeField" VALUE="" SIZE=10 onChange="exists(this.value, 'Please enter the type of brain.');">
In the HTML snippet above, the exists() function is called from the onChange event handler associated with the text element named typeField. This means that when a user changes the value in the type field and then moves away from that field, it triggers the exists() function. If no value for the type field exists, an alert message reminds the user to enter one.
Next: Checking for Numbers
