How to use JavaScript to Validate Form Data [con't]

Using the Validation Functions

Creating a Validation Variable

Inside of this variable (which is an object literal) you
place the validation macro function with the name of the
appropriate form field, like this:

This would correspond to a text field in your form
such as <input type="text" name="zipcode">.

Specifying Custom Messages

You can specify a custom error message if the zip code is invalid,
which better fits the context of your form. (Maybe someone has
a previous zip code and a new zip code.)

Note: This message will always be shown, even if there are different error codes. For this reason you might not want to specify a custom error message directly, but you might decide to add your own error codes with new error code messages.

Also, you may feel comfortable overriding the default error message texts, which are within the reserved error code numbers 1-30.

Form Validation Command

In order to validate your form by this set of requirements, you execute the function validate([form], check_form_example), which performs all the validation steps as specified. If the form fields within this variable, check_form_example, are all validated, the function returns a value of true. This allows it to be in the submission pre-check of a form directly:

In this context, "this" is the correct code which refers to the actual form ("this" refers to the element in which an event handler is placed; the element in which the event handler is placed is the form itself).

As you may know already, JavaScript defines that if the onsubmit event handler function returns a value of false, the form will not be submitted. If the validate() function has returned false, the form isn't submitted, and the user is able to correct the error of which they were alerted. If the validate function returns true, the form is submitted as normal.

Creating Custom Validation Functions

What do you do if your Web site only accepts Visa, MasterCard and Discover? The validation script will by default accept any type of credit card number, so you need to write a custom validation function.

Here's what you can do, noticing that Visa account numbers begin with 4, MasterCards begin with 5, and Discover cards begin with 6.

In this example '456' are the beginning digits of credit cards your business can accept (in this case Visa,
MC, and Discover). Note that a faster way of checking the digits is this:

or even this

Then create a validation variable for the
credit card information. This validation variable
could be used to validate the submission of credit
card information in the same way that the previous
validation variable was used to validate the
submission of the form containing billing
address information.

You could also add the same attributes, card, cardname, message, expiry to the existing validation variable if your card information was part of the
same form as the billing address.

Smart Validation Behavior

The validation script tries to avoid repeating the same
error message twice. When a certain error code has been recorded
for a certain field, the validation function won't show the same error message to the user. If the user changes
the field but a different error message results, the user
will be prompted with the new error message.
You have the option of overriding this behavior by
specifying the attribute force to have
a value of 1. Three of the fields in the example form above
have this behavior. Their validation parameters are specified
like this:

This was the idea of Greg Dietsche, because sometimes loops could result when evaluating optional fields:

"When validating against a list such as this one which has two optional
fields, occasionally a loop can ensue if neither of the optional fields (in
this case, email and subject) are filled in by the user...

To solve that problem, I made the following changes to the validation
script. Basically the idea is that if the user has been shown a prompt for
an *optional* field once, then they will never see the prompt again."

This was a nice suggestion, so it was taken and added to.
Now the error state is maintained for each field, and optional fields
bring up an alert message if they have a possible error, and
if the error number is different from the error that
may have been "detected" before.

Essentially, this lets a
user leave the value of the field as they wish, if they
want to ignore the error message.

Notice also that there is a filter attribute.
When this attribute is set, valid input will be reformatted to
have a standard appearance. The script does its best to ensure
that there is no data loss when reformatting input, so if part
of a field is not recognized, it is left unaltered.

You can extend the filtering behavior by using functions like
String.toUpperCase(). The value you return
from a custom validation function will be used to reformat the
data.

Technical Specifications of the Validation Function

This section provides specifications for
the validate() function used as the
onsubmit event handler.

The event handler is called with the following syntax

The varible check is the validation variable
which has been described above.

Every element of the form with a name contained in check will be submitted to the function contained in check[name].verify, if such a function is present. The argument will be the value of the element if the element is text or textarea, otherwise the element object itself.

If an error code is set by this function check[name].verify, and if one of the following is true—the value of check[name].force is true, or the field has an an error different from an error it may have had immediately prior to this invocation of validation—then present_element is set to this element, check[name].err and present_error are set to the error number, and any error message is alerted, the element is focused, and false is returned from validate(). The browser will then prevent form submission.

Otherwise, after the end of the form is reached, true is returned from validate, and form submission is permitted.