Friday, March 29, 2024

Order Form Part 7: Form Validation, step 2

We are now ready to take our FrontPage generated template and customize it
for our use (see the

last step
in this series.)  We are going to use this routine to check
three numeric input fields on our form, named qtyA, qtyB and qtyC (we don’t need
to check the total fields because if they are ever changed, they are overwritten
with the results of our calculate( ) function.)

There are two approaches we could take.  First, we could repeat this
routine three times in our function, checking all three fields each time. 
This gives us a couple of advantages, in that we can hard code each field name
into the checkStr assignment instruction , the alerts and the focus statements,
and that we could have different checkOK strings for each field (which is not
needed in this particular instance.)  The disadvantage is that we will wind
up with more lines of code, and more executions of the code, though we could, of
course, set up separate functions for each field (even more code!)

The second approach would be to create a function that accepts both the input
field value and the input field name as variables, and uses them where needed in
the function.  This is perhaps a more elegant, though a little more
complex, solution.  It’s only disadvantage is that all fields to be checked
would have to use the same checkOK value (although that too could be a parameter
passed to the function.)

For the sake of clarity of code, I’m going to provide an example of the
former approach.  Take a look at this code:

function validNum(theForm)
{
  var checkOK = "0123456789.,";
  var checkStr = theForm.qtyA.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 "Class A quantity"
field.");
    theForm.qtyA.focus();
    return (false);
  }

  if (decPoints > 1 || !validGroups)
  {
    alert("Please enter a valid number in the "Class A quantity" field.");
    theForm.qtyA.focus();
    return (false);
  }

  var checkOK = "0123456789.,";
  var checkStr = theForm.qtyB.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 "Class B quantity"
field.");
    theForm.qtyB.focus();
    return (false);
  }

  if (decPoints > 1 || !validGroups)
  {
    alert("Please enter a valid number in the "Class B quantity" field.");
    theForm.qtyA.focus();
    return (false);
  }

  var checkOK = "0123456789.,";
  var checkStr = theForm.qtyC.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 "Class C quantity"
field.");
    theForm.qtyC.focus();
    return (false);
  }

  if (decPoints > 1 || !validGroups)
  {
    alert("Please enter a valid number in the "Class C quantity" field.");
    theForm.qtyC.focus();
    return (false);
  }

calculate();
return (true);
}

You’ll notice that there is one iteration of our routine for each of the
three fields.  You’ll also notice that if we get to the end of the function
without encountering any errors, we invoke the calculate( ) function.  This
is because we know that one of our numeric fields has changed, and if there
aren’t any errors we need to calculate new totals. this also allows us to invoke
only our validNum( ) function from our body code when the onchange event occurs,
meaning the we must change each of the lines defining our input fields like
this:

<input type="text" name="qtyA" size="5" tabindex="5" onchange="return
validNum(document.ofrm)">

<input type="text" name="qtyB" size="5" tabindex="5" onchange="return
validNum(document.ofrm)">

<input type="text" name="qtyC" size="5" tabindex="5" onchange="return
validNum(document.ofrm)">

In these statements you’ll notice that we are passing the order form (which
is named ‘ofrm’, and which is an object within our document) which is what our
function is expecting as its first (and only) parameter.  This makes all
the fields in our form available to the function.

If you click to see our form as it now is with all this code in place,

click here
(use your browser’s "view source" to see the code itself.)

In the next step, we’ll
add some validation for the remaining requirements of our form.

 


Return to the previous step  | 
Proceed to the next step

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured