jQuery AutoValidation - markup-based form validation v3.2 2010-May-25

Supply any <form> with the class "autovalidate", include the JS library file jquery.autovalidate.js, place certain CSS classes and custom attributes on your form elements, and (with JS enabled) your rules will be enforced with nice error messages.

In Action

<input type="text" name="firstName" class="required">
<input type="text" name="middleName" class="required" requiredmessage="Hey, you forgot to fill out your middle name!">
<input type="text" name="lastName" class="required" nicename="Last Name" mustmatch="^[a-zA-Z]+$">
<input type="text" name="birthday" class="required" nicename="Birthday" validateas="date" minvalue="1/1/1970">
<input type="text" name="userPhone" validateas="phone">
<input type="text" name="userEmail" validateas="email" nicename="Your Email">
<input type="text" name="zipCode" class="required" validateas="zipcode" nicename="Zip Code" requiredmessage="I really need you to fill out your zip code. Really.">
<input type="text" name="newPassword" class="required" minlength="7" nicename="Your new password">
<input type="text" name="weight" validateas="integer" minvalue="100" maxvalue="210" nicename="Your weight">
<input type="text" name="magicword" class="required" mustmatch="^(please|xyzzy|open sesame)$" mustmatchmessage="That's not a magic word. Didn't your mother, text adventure games, or bugs bunny teach you anything?">
Adjectives
(choose 3-5)





<input type="checkbox" name="adj" value="cool" id="adj_cool" minchecked="3" maxchecked="5" nicename="adjectives"> <label for="adj_cool">cool</label>
<input type="checkbox" name="adj" value="awesome" id="adj_awesome"> <label for="adj_awesome">awesome</label>
<input type="checkbox" name="adj" value="grunky" id="adj_grunky"> <label for="adj_grunky">grunky</label>
<input type="checkbox" name="adj" value="bizarre" id="adj_bizarre"> <label for="adj_bizarre">bizarre</label>
<input type="checkbox" name="adj" value="sweet" id="adj_sweet"> <label for="adj_sweet">sweet</label>
<input type="checkbox" name="adj" value="old" id="adj_old"> <label for="adj_old">old</label>
<input type="checkbox" name="adj" value="tart" id="adj_tart"> <label for="adj_tart">tart</label>

Features/Docs

<form ... class="autovalidate">
This attribute is required to initiate form validation.
As of version 1.8, if a field that fails validation has an associated <label> element, it will have the class "failedvalidation" applied to it; you may use CSS to highlight this field. As of version 1.8.2, this class will also be applied to the form element itself.
nicename="..."
The error messages generated by the library will use this value to refer to the offending element. If this attribute is not supplied, the name="..." attribute will be used instead.
class="required"
The form will not submit unless the form element has a value which is not null or empty ("").
This also works for <select>s, since putting <option value="">(please choose an option)</option> will not allow the form to be submitted if that option is chosen.
If requiredmessage is supplied it will be used for the alert (see below).
requiredmessage="..."
If a required field (see above) is omitted, this attribute will be used for the error message. If not present, a message like "Email is a required field." will be used instead.
As of version 1.3.5, this attribute may also be placed in the <form> tag itself as a generic fallback message. Used here, instances of %nicename% appearing in the message will be replaced with the nicename of the element. Here's an example:
<form requiredmessage="Please provide us with your %nicename%; see our Privacy Policy if this concerns you." autovalidate="true">
   <input type="text" name="fName" class="required">
   <input type="text" name="mName" nicename="Middle Name" class="required">
   <input type="text" name="lName" class="required" requiredmessage="Honestly, we *NEED* to know your last name!">
</form>
For the three fields above users will see the following messages if they don't fill out each field:
"Please provide us with your fName; see our Privacy Policy if this concerns you."
"Please provide us with your Middle Name; see our Privacy Policy if this concerns you."
"Honestly, we *NEED* to know your last name!"

If the requiredmessage attribute was not present on the <form> above, instead users would see:
"fName is a required field."
"Middle Name is a required field."
"Honestly, we *NEED* to know your last name!"
mustmatchmessage="..."
If a field with validateas="..." or mustmatch="..." fails to match the criteria, this attribute will be used for the error message. If omitted, a more generic (but still pleasant) error message will be used.
validateas="phone"
651_1421
(215) 947-8190
303.554.7227
+1.314.725.5096
If the element has a value, it must have at least 7 digits (with sets of 3 and 4 unbroken), and may optionally have another set of 3 unbroken before that, and another run of digits before that. All sets of digits may be separated by any non-digit character.
If mustmatchmessage is not supplied the generic error is "_____ doesn't look like a valid phone number."
validateas="email"
foo@bar.com
foo.bar@sam.com
a@b.c
Very simplistic check, ensures the presence of '@' and '.' characters with at least one character surrounding them.
If mustmatchmessage is not supplied the generic error is "_____ doesn't look like a valid email address. It must be of the format 'john@host.com'"
validateas="date"
6/1/02
12-31-2002
If JS can make a date out of it using new Date(), it's considered acceptable. This allows dates such as 9-31-2002 (which JS interprets as October first).
If mustmatchmessage is not supplied the generic error is "_____ must be a valid date (e.g. 12/31/2001)"
validateas="zipcode"
19009
19009-3451
5 digits, optionally followed by a hyphen and 4 digits
If mustmatchmessage is not supplied the generic error is "_____ doesn't look like a valid zip code. It should be 5 digits, optionally followed by a dash and four more, e.g. 19009 or 19009-2314"
validateas="integer"
1024—a sequence of digits
If mustmatchmessage is not supplied the generic error is "_____ must be an integer."
validateas="float"
3.1415—a string of digits, possibly followed by a period and more digits. (No commas, dollar signs, etc. are allowed.)
If mustmatchmessage is not supplied the generic error is "_____ must be a number, such as 1024 or 3.1415 (no commas are allowed)."
mustmatch="..."
A generic way of supporting validation, this should contain a regular expression which must find a match in the element to succeed. For example, mustmatch="please" will only allow the value "please" to be entered, whereas mustmatch="^[a-zA-Z][a-zA-Z0-9_]*$" will require the value to begin with a letter and be followed by zero or more numbers, letters, or underscores.
If mustmatchmessage is not supplied the generic error is "_____ is not in a valid format."
As of v1.5, the regexp is case INsensitive by default—use mustmatchcasesensitive="true" to force a case-sensitive RegExp. Also, the supplied regexp is prefixed with "^" and suffixed with "$" automatically.
As of v1.8, the supplied regexp is no longer prefixed with "^" and suffixed with "$" automatically. (Sorry about the change of mind.)
mustnotmatch="..."
Similar to mustmatch, except the validation fails if the regexp matches the value.
mustmatchcasesensitive="true"
As noted above, the regular expression for mustmatch="..." is case insensitive by default. Use this attribute to force a case-sensitive match.
minvalue="..."
The value of the element may not be less than the value supplied in this attribute. This also works with dates if validateas="date" is supplied, e.g.
<input type="text" name="pubdate" nicename="Date Published" validateas="date" minvalue="1/1/1970">
maxvalue="..."
The value of the element may not be greater than the value supplied in this attribute. This also works with dates if validateas="date" is supplied, e.g.
<input type="text" name="pubdate" nicename="Date Published" validateas="date" maxvalue="10/26/2008">
minlength="..."
The value of the element must have at least as many characters as the integer specified in this attribute.
maxlength="..."
The value of the element must have no more characters than the integer specified in this attribute. (This will also be enforced in text inputs by the browser as the user types, but for textarea an alert will fire if this limit is exceeded.)
<input type="checkbox" ... minchosen="...">
At least this many checkboxes with the same name as this one must be checked. If this requirement is not met, the error message is "Please choose at least __ _____", where the second blank is the nicename of this checkbox. This attribute (and the nicename to go with the message) need to be put on the same checkbox, but only need to be put on one of the checkboxes in the set.
<input type="checkbox" ... maxchosen="...">
At most this many checkboxes (with the same name as this one) may be checked. If this requirement is not met, the error message is "Please choose no more than __ _____", where the second blank is the nicename of this checkbox. This attribute (and the nicename to go with the message) need to be put on the same checkbox, but only need to be put on one of the checkboxes in the set.
<select multiple ... minchosen="...">
At least this many options in the select must be chosen. If this requirement is not met, the error message is "Please choose at least __ _____", where the second blank is the nicename of this select.
<select ... maxchosen="...">
At most this many options in the select may be chosen. If this requirement is not met, the error message is "Please choose no more than __ _____", where the second blank is the nicename of this select.

ToDo

FEATURE: Group min/max error messages
Rather than warning the user separately about minvalue/maxvalue, minlength/maxlength, etc. boundaries, the error message for either boundary violation should present the range if both bounds have been applied.