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
This would correspond to a text field in your form
<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
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).
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,
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
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
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
Technical Specifications of the Validation Function
This section provides specifications for
validate() function used as the
onsubmit event handler.
The event handler is called with the following syntax
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,
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