At the end of the last
step, I suggested that you try out our form as it now is, but try putting alpha
characters into the input number fields. If you did so, you would have
seen that the form is not very helpful in pointing out the error. You
might also have noticed that you can successfully submit the form even with the
name and email fields blank. This is contrary to what the form itself
says.
To correct this
situation we need to have some validation. Since the errors, if they
occur, occur on the client’s computer, we need our validation to also be on
the
client side, which means we need JavaScript, as we did for the calculations.
There’s an article
located here on HTML Goodies that talks about Microsoft
FrontPage and about how
it can be used to generate some code for you. Using the methods described
there, I can generate the following code to check the validity of characters in
a numeric field. It’s some interesting code, worth taking a closer look
at, and perfect for our present requirements. Here it is:
function FrontPage_Form1_Validator(theForm)
{
var checkOK = “0123456789-.,”;
var checkStr = theForm.theField.value;
var allValid = true;
var validGroups = true;
var decPoints = 0;
var allNum = “”;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch = = checkOK.charAt(j))
break;
if (j = = checkOK.length)
{
allValid = false;
break;
}
if (ch = = “.”)
{
allNum += “.”;
decPoints++;
}
else if (ch = = “,” && decPoints != 0)
{
validGroups = false;
break;
}
else if (ch != “,”)
allNum += ch;
}
if (!allValid)
{
alert(“Please enter only digit characters in the “theField” field.”);
theForm.theField.focus();
return (false);
}
if (decPoints > 1 || !validGroups)
{
alert(“Please enter a valid number in the “theField” field.”);
theForm.theField.focus();
return (false);
}
return (true);
}
Let’s get under the hood
(or bonnet, depending on where in the world you are!) FrontPage generated
this as a function, so I have copied the function in here in its entirety,
exactly as FrontPage generated it. The first things it does is to create
some variables and set their initial values. It’s worth noting that if I
had used two fields in this example, and specified the same validation criteria
for them both, the second field would cause another copy of this routine to be
generated in the function, with everything the same except for the name of the
field to be validated. Thus, in the second routine, these variables would
not be created (they would still exist from the first routine) but would be
reinitialized.
The variables and their
uses are as follows: checkOK is used to hold a list of characters that are to be
permitted in the subject string; checkStr holds the subject string; allValid is
a Boolean (true/false) value, initially set to true to indicate that the string
only contains valid characters, and set to false as soon as something bad is
encountered; allGroups is another Boolean, this time indicating the validity of
grouping characters (the commas used to group the thousands, etc.); decPoints is
used to indicate whether a decimal point has been encountered; alNum is used to
hold all the valid characters encountered, except for the grouping character
(the comma.) Note that even though these variables are defined vwithin a
function, they are defined using the var keyword, and are therefore global in
scope (can be referenced outside of the function in which they are defined.)
The routine uses nested
"for" loops to scan the characters of the target string, comparing each to the
string of characters in the permissible list.
Note that while this
routine does a pretty good job of checking the input string, it is not perfect.
You might notice that it has no means of checking for the correct use of
grouping commas, for example. It will permit a number like 1,1,1, for
instance. Perhaps worse than that, it doesn’t have the means to check for
the correct use of a hyphen to negate the number. Because of the manner in
which it scans, it would also permit -1,-1,-1,1.00 for example, which could give
the rest of our JavaScript code quite a headache! For our purposes, we
could simply leave the hyphen out of the list of permitted characters. We
don’t need, or even want, any negative numbers, so why allow the hyphen?
You’ll notice that since the inner for loop uses the length property of the
checkOK string to control the number of iterations through it’s loop, we need do
no more than delete the hyphen from the string to correct the situation.
In the next step, we’ll
customize this routine for our particular application.
