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
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.
Conclusion
I hope this information is of benefit to you. If you have questions, please write to .
Original: September 25, 2008