Order Form Part 6: Form Validation, Step 1

By Vince Barnes

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.

 

 

 

 

Return to the previous step  |  Proceed to the next step



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •