Initial Setup

First things first, include the necessary Javascript files:

Now that you've done that, you're just about done. All that's left to do is attach a class to any of your form elements. See the demo for some examples on how to do that. Here's a list of the default classes you can use (with the latest version), or you can setup your own.

jsrequired - Field must have some sort of value.
jsvalidate_number - Any integer; accepts decimal and negative
jsvalidate_digits - Only Numbers
jsvalidate_alpha - Only letters
jsvalidate_alphanum - Only letters, numbers, and underscores.
jsvalidate_email - Any valid email address.
jsvalidate_uscanzip - US or Canada Zip code; Accepts optional US zip + 4
jsvalidate_usstate - Any 2 letter uppercase state of the United States.
jsvalidate_usphone - US Phone Number, accepts most common formats.
jsvalidate_creditcard - Validates VISA, MasterCard, American Express; formats: no spaces, spaces, or dashes.
jsvalidate_ssn - Social Security Number in the format: XXXXXXXXX, XXX XX XXXX, or XXX-XX-XXXXX
select-notfirst - This class can be applied to select boxes (drop-downs). It prohibits the user from selecting the first option from the list.

Configuration

JSValidate has some options you can configure across all the elements on your form. You can find these options in the jsvalidate.js file. Here's an explanation of each option:

errorTag - Default is "span"; You can set this to any HTML tag that opens and closes, such as "div", "p", "a", "b", etc.

errorClass - Default is "jsvalidation"; This class is set to every element JSValidate creates, using the tag above.

errorIDPrefix - Default is "jsvalidator"; This is the prefix is attached to the element name/id to form the ID of the element above Do not use spaces or special characters.

errorLocation - Default is "afterEnd"; You can enter "beforeBegin", "afterEnd", or "none". If you choose "none", JSValidate will not create the HTML element that shows the error message. You then have the option of creating it yourself. If you choose to do so, the element MUST have an ID in the following format: error ID prefix, then an underscore("_"), then the name or id of the element you wish to validate. (name comes first)

startGone - Default is false; I couldn't think of another name for this, but if true, it will apply "display:none" to the error messages when they are created. Otherwise, the element is just invisible. You'll notice this is important when the invisible error messages affect your form layout.

useBR - Default is "none"; Accepts "before", "after", "both" or "none"; Adds a new line (<br />) before and/or after the created error message.

useBlur - Default is true; Attaches an onBlur validator to each form element.

submitClass - Default is "submit_action"; Apply this class to any element inside any form to let this element validate/submit the form (on click).

highlightColor - Default is "#FFFF99"; Color of the highlight when errors aren't corrected after the first attempt to submit.

endColor - Default is "#FFFFFF"; This is what you generally want to set to the background color behind the form elements.

extMessage - Default is true; Attaches a message to File Inputs telling users what types of files are accepted.