Looking for a Number
Now we know whether the user typed in a character. But did he or she enter numbers or letters? Most of the time, it's not enough to know that the user simply entered a character. Instead, you'll want to know that the user entered the correct type of data.
For instance, you might want to know that the characters in a credit card number field are actually numbers. You can use the JavaScript functions parseInt, parseFloat, and isNaN to perform this validation, but these functions check only the first digit of an input value. The example below shows you how to create a function that does a more thorough job of validation.
Let's start by creating a new function called isANumber:
function isANumber(number, message) {
answer = 1;
First, we check to make sure the entered value starts with a number. If so, we set the answer variable equal to 1 and move on.
if (!parseFloat(number)) {
//the first digit wasn't numeric
answer = 0;
alert("Please enter a numeric value
for the " + message + " field.");
}
If the JavaScript function parseFloat() does not return true (meaning that the user didn't enter a number), the function displays a warning message to the user. If the first digit is numeric, the function continues.
else {
//the first digit was numeric, so check the rest
for (var i=0; i<number.length; i++) {
if ((number.charAt(i) != "0")
&& (!parseFloat(number.charAt(i)))) {
answer = 0;
alert("Please enter a numeric value
for the " + message + " field.");
break;
}
}
}
return answer;
}
Don't be frightened. The chunk of code isn't as scary as it looks. In the else statement above, each digit of the input number is checked individually with the for (var i=0; i<number.length; i++) loop. We've already checked the first digit (digit 0 in JavaScript terms), so we use i++ to increment the variable by one (i++ is shorthand for i=i+1 in JavaScript). If the remaining digits are numeric, we continue (the && simply means "and"). If the function finds anything else, an alert flashes on the screen, and we exit the loop (with the break command).
Of course, all that JavaScript doesn't mean much without the appropriate HTML to call it:
// Number of brains you'd like to take home
<INPUT TYPE="text" NAME="numberOrdered" VALUE="" SIZE=10
onChange="if(this.value) {
if (!(isANumber(this.value, 'number of brains'))) {
this.focus();
}
}">
In the preceding example, you can see that all of the code associated with the onChange event handler gets executed as soon as a user changes the value of the numberOrdered field. Basically, if a value for the numberOrdered field exists, that value gets passed to the isANumber() function for validation. The isANumber() function checks each digit passed into it and accepts numbers only. If users enter characters other than numbers, they'll get a message saying, "Please enter a numeric value for the number of brains field." The focus is then returned to the number field via this.focus(), which means, "Return the focus to the current form element."
Next: Processing Form Data
