Order Form Part 6: Form Validation, Step 1
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.
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:
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))
if (j = = checkOK.length)
allValid = false;
if (ch = = ".")
allNum += ".";
else if (ch = = "," && decPoints != 0)
validGroups = false;
else if (ch != ",")
allNum += ch;
alert("Please enter only digit characters in the \"theField\" field.");
if (decPoints > 1 || !validGroups)
alert("Please enter a valid number in the \"theField\" field.");
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.
In the next step, we'll customize this routine for our particular application.