Simple data validation
This program shows how to perform simple data validation.
Programming Issues
In this example, the user can enter some information into the text box, select a category from the drop box, and click the button to see if the information validates as belonging to that category.
The information is validated using a number of functions. The isPosInteger() function returns
true if the data contains nothing but digits. The value of the text box is first converted
to a string using the toString() method. Then, the function loops through each character at a time, and
if it finds one that is not a digit (i.e. if the expression s.charAt(n) < "0" || s.charAt(n) >
"9" evalutes to true) then the function returns false. || is the
boolean OR operator; the expression as a whole evaluates to true if the expression to the left of it
evaluates to true or the expression to the right evaluates to true. If the function
gets to the end of the string, and this condition has never evaluated to true, then the function
returns true. Note that the charAt(n) method returns the single character at index location
n of the string, that index, as always, beginning at zero.
The isInteger() function performs a very similar task. The only difference is that in this case the
number can be negative, so we have to allow the case where the first character is a minus sign. Thus, we must exclude from
our conditional expression the case where ( n == 0 && s.charAt(n) == "-" ) - we exclude it by
prefixing it with the unary NOT operator, !, which evaluates to true when the
expression following it evaluates to false, and vice versa.
The isNumber() function does the same thing as isInteger, except now we can allow for the
possibility of a single decimal point existing within the number. We set up a variable, dp which we
initialise to false. If the function encounters a decimal point and the value of dp
is false, then we allow this, continue, and set dp to true. If the function
encounters a decimal point and the value of dp is true, then it must have encountered a
decimal point before. Since a number cannot contain two decimal points, then it returns false in this
case.
The isState() function returns true if the value of the text box matches
one of the fifty U.S. State two-letter abbreviations contained in the states array that we create
(take a look at this array in the JavaScript code if you don't know any U.S. State abbreviations!). It loops through
the entire array, and if it finds a match, it returns true. If it gets to the end of the array, and it
hasn't found a match, then it returns false. Note that the input is first converted into all upper case
using the toUpperCase() method, so that the input will valid regardless of case. Note that this is not a
very practical application; with a relatively small number of finite possibilities, it is more likely that the user
would be prompted to select a state from a drop box, rather than to type it in and then have it validated.
There is no separate function for checking whether the entry is a valid U.S. zip code. Instead, the main
function checks whether the data is a positive integer, using isPosInteger() and the length
of the value of the text box is precisely five characters. Note that the user can still make a five
digit entry that does not represent a valid zip code, since not all 100,000 possibilities are used in the
zip code system.
Finally, the isAirportId() checks whether the input is a valid ICAO format airport identifier. A
valid identifier must consist of four letters. Therefore the function first checks whether the length of the input
is precisely four, and if it is not, it returns false. It then cycles through each of the four characters
and checks whether they are all letters, i.e. whether the condition s.charAt(n) < "A" || s.charAt(n)
> "Z" evaluates to false. Again, the input is converted to upper case using the
toUpperCase() method, and again, the user must get the format correct, but he can still enter a
four-character input that does not correspond to a real life airport identified.
One further construct we use in this script is the conditional expression (strictly so-called; the
code a > 5 is an expression, and is conditional, but "conditional expression" refers to
something specific in JavaScript). The alert box that is displayed upon correct validation contains the message
"Entry validates as a..." followed by the category of data. However, if the name of the
category starts with a vowel, then that final "a" should become "an".
We use the conditional expression to manage this: ((form.dropSel.selectedIndex == 1 || form.dropSel.selectedIndex
== 5) ? "n " : " "). The conditional expression takes the form (condition) ? statement1 :
statement2. If the condition evaluates to true, then statement1 is executed. If the
condition evaluates to false, then statement2 is executed. In this case, if the
selectedIndex is 1 ("integer") or 2
("airport identifier") then we should use "an"; otherwise, we should use
"a".
Finally, in every case where the input fails to validate, we call the focus() method of the
value of the text box, to automatically set the input focus back to the text box so that a new entry
can be made without having to click on it. Also, we call the select() method to select the entered data,
so that the user can start typing and automatically overwrite his previous entry, without having to manually delete
it.
If the input does validate correctly, we show an alert window stating that it does. In a real-life application, these
routines would be triggered by a submit button. If the input did not validate, the routine would prevent
the form submission from proceeding; if the input did validate, the routine would allow form submission.