JSFormVal is a JavaScript class which allows web developers to write reliable client-side form validation quickly and easily. It provides methods for validating many different kinds of form data, removing some of the drudgery from this common and unglamorous task.
Play with the form below to see exactly what JSFormVal does. You can view the source of this page to see the validation code.
Implementing JSFormVal is a pretty straightforward process. (That's kind of the point.)
These instructions assume that you store your JavaScript files in a subdirectory named "js" in the root of your web directory. If this isn't the case, substitute the correct paths in the <script> tag below.
Download JSFormVal and extract it into your JavaScript directory.
Add the following line to the <head> of your HTML document:
<script type="text/javascript" src="/js/JSFormVal/JSFormVal.js"></script>
Assign a unique id to each form element that you wish to validate.
Write a JavaScript function named validateForm() (or whatever
you like) to be invoked when the form's onsubmit event is fired.
Here's an example:
function validateForm() {
var fv = new JSFormVal();
fv.required( "email", "Email Address is a required field." );
fv.email( "email", "That's not a valid email address." );
fv.required( "password1", "Please choose a password." );
fv.required( "password2", "Please retype your password for verification." );
fv.match( "password1", "The two passwords do not match.", "password2" );
return fv.validate();
}
Add an onsubmit attribute to the <form>
element. For example:
<form action="mypage.php" method="post" onsubmit="return validateForm();">
That's it!
Note: All validators, except for required(), consider empty fields to be valid. If you wish to disallow empty values for a particular field, you must use the required() validator, even if you've also assigned other validators to the field.
The first two parameters for all methods (except for validate(), which takes no parameters) are the same. They are:
formControl: The field to be validated. It can be supplied as either a DOM node
reference, or a string corresponding to the element's id.
errorMsg: The message to be displayed to the user if validation fails. This parameter must be a string.
Ensures that formControl contains a valid date in the specified format.
Valid values for dateFormat are:
Ensures that formControl contains a valid email address.
Ensures that the values of formControl and formControl2 match.
This is most commonly used for passwords, and sometimes for email addresses.
Ensures that formControl contains a numeric value, optionally limited to a specified range and/or number of decimal places.
By default, the validator will accept any integer value (including negative ones), but not decimals. If you wish to modify this behavior, use the optional parameters as described below:
Use minValue and maxValue to restrict the field to a certain range. These values may be either int or float. If either value is null, the validator will enforce no lower or upper limit on the value, respectively.
Obviously, minValue should be less than maxValue.
Use minDecimals and maxDecimals to require a certain number of decimal places. For example, for currency amounts in US dollars, you'll probably want to require exactly two decimal places by setting both of these parameters to 2.
To require no minimum number of decimal places, set minDecimals to 0 or null. To place no upper limit on the number of decimal places, set maxDecimals to null.
Again, minDecimals should be less than or equal to maxDecimals, for obvious reasons.
Ensures that formControl contains a valid telephone number in the format nnn-nnn-nnnn.
Validates formControl against the regular expression defined by regEx.
regEx may be supplied as either a RegExp object, or a string. In the latter case, you can use the optional regExFlags parameter to specify any desired pattern flags.
Sets formControl as a required field.
Ensures that formControl contains a valid two-letter US state abbreviation. This validator is case-insensitive.
Ensures that formControl contains a valid 24-hour time expression (e.g., hh:mm). If the optional parameter withSecs is true, the validator will require a time expression including seconds (e.g., hh:mm:ss).
Ensures that formControl contains a valid URL.
Processes all validation. If the form is valid, the method will return true. If not, it will alert the first problem found to the user, give focus to the field in question, and return false.
Ensures that formControl contains a valid ZIP code.
Set the optional allowPlus4 parameter to true if you wish to allow ZIP+4 codes (e.g., 90210-7283). This parameter defaults to false.
JSFormVal is made available under the Creative Commons Attribution-Share Alike 3.0 License.
In short, this means that you are free to use, distribute, and modify the code, for commercial or non-commercial purposes, provided that all derivative works are made available under the same license, and that the original attribution is left intact. Please read the license for complete details.
JSFormVal was written by Travis Miller.
If you've used JSFormVal in a project, I'd like to know about it. If you have bug reports, ideas for improvements or new features, or general technical comments, I'd like to hear about that as well. This is, obviously, an early version—I'd like to develop it into a robust and full-featured tool.
You can get the latest version of JSFormVal from http://abandonedbanana.com/web/js/.