Order Form Part 7: Form Validation, step 2

By Vince Barnes

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'd lick 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



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date