Order Form Part 8: Form Validation, step 3

By Vince Barnes

In the last step of our development project, we created code to validate the information being entered into fields on our for that had particular requirements of that data, specifically that only numeric data in entered into fields that we require to be numeric.  This type of qualitative validation is not the only validation we need, however.  If you look at our form, you will see that it says that "red denotes required information".  If it's required, there should be something to make sure it's there!

This type of validation is subtly different from the last type we looked at.  In that validation, we checked the content of the field as soon as something was put into the field by using the "onchange" event.  When we're attempting to ensure that required data has been entered, we have to allow the person typing data into our form as much time as they might need to enter everything they intend to.  This means we can't check any fields as they are changed (or not!) but instead, we have to wait until they are done entering data and click our "submit" button.  At that point we can see everything they have entered, and can check whether or not something is missing.  To get the timing right for that, we'll need to change our
<form method="POST" action="submitted.html" name="ofrm">
statement.  More on that in a minute!

First, let's take a look at a function that can determine whether or not all required fields have been entered.  In the interest of avoiding obfuscation (I love that word! - it basically means hiding a meaning behind a complicated word or situation -- and it's guilty of what it describes!) I have reduced the number of fields that you would normally expect on an order form to just two.  The principle is the same, however, and you will easily be able to adapt this code for your needs.  I have only required two fields -- the name and email address.  Let's take a look at the code (as you may have noticed by now, I am strongly in favor of writing this type of JavaScript as functions that can be called when needed - it's not the only way to write it, but in my humble opinion, it gives the cleanest code):

function Validate(theForm)

if (theForm.Name.value == "")
alert("Please enter a value for the \"Name\" field.");
return (false);

if (theForm.Email.value == "")
alert("Please enter a value for the \"Email\" field.");
return (false);
return (true);

Not too complicated!  As you can see, each test is simply to determine whether or not the field has any content (ie, it's not equal to null.)  This is a fairly simplistic test, but it's enough for our needs right now.

Now that we have a function to test for missing data, we need to be able to call it at the right time.  As I said before, we will need to run this code after the user has entered everything they intend to, and has clicked the submit button to send it in".  We need to run it before whatever "action" we have specified takes place, however, because it is our intent to check the data before it's sent in.  JavaScript provides an event handler for precisely this purpose )don't you just love those developers!)  It's called  "onsubmit".  To invoke it, we need to modify our "Form" statement like this:

<form method="POST" action="submitted.html" onsubmit="return Validate(this) name="ofrm">

Using this format allows us to call the "Validate" function prior to taking the action specified.  If all is good, the function will return with a "true" value and the action will be performed.  If there's a problem, the alert in or function will have take place and the form submission will effectively be cancelled.

There are many enhancements that can be made to this type of validation.  Your creativity will certainly allow you to come up with several.  The important thing to remember here is the timing.  If you think about the kinds of thing you might want to check, you will realize that this is a great opportunity to ensure that the data you receive is the kind of data that will serve your purpose.


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