How to Use JavaScript to Validate Form Data / Page 2 | WebReference

How to Use JavaScript to Validate Form Data / Page 2


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

Using the Validation Functions

Let's show an example of what the email() function does. This code:

will result in the array

Now we explain how these are connected to a form.

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.

You can find the full source code here.


I hope this information is of benefit to you. If you have questions, please write to .

Original: September 25, 2008