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.");
theForm.FirstName.focus();
return (false);
}
if (theForm.Email.value == "")
{
alert("Please enter a value for the "Email" field.");
theForm.LastName.focus();
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.
