Model: Kayla Boye

Camera: Canon 5D Mk II

Lens: 50mm 1.4

If you prefer to just read the source then feel free to fork it on GitHub and have at it. Otherwise, here we go!

Basic Usage:

HTML

In the markup below you’ll see a standard HTML form with one minor exception. Each field element has a data-validate attribute. This attribute tells the validator plugin which pattern to match against. For instance, if the field has data-validate="email" then the field’s value will be matched against an email pattern.
A complete list of all validation types (as of writing this) is as follows:

• required – enforces that a field has been filled in
• alpha – enforces that a field contains only alphabetic characters
• numeric – enforces that a field contains only numeric characters
• email – enforces that a field contains a proper email address
• url – enforces that a field contains a proper URL

Javascript

The Javascript usage of the validator is also very easy. You simply invoke the validate() method on your form’s selector. This method listens for a submit event on the form and matches field values against all of the corresponding data-validate attributes. In the example below we also pass a small object literal to the validate() method. This literal specifies a special callback function (fieldError) to be invoked when the validator finds an invalid field.
Note – You may also notice that the scope of the fieldError function is in terms of the invalid field: allowing 'this' to refer to the field in question.

Also Note – The fieldError method is only one of three possible callbacks. There are also general success and error callback functions. These are invoked when an entire form has either completed successfully or contains validation errors.

Try It Out

For basic usage that’s all it takes! A valid form will submit just like normal and an invalid form will handle the errors any way you specify. Just mix in a few nifty CSS classes for marking fields with errors and you’ve got something worth using

Advanced Usage:

Custom Validation

In order to define your own, custom validation type you must be aware of the validationHooks object literal that the plugin utilizes. Each validation type (or validation hook) has two items: a set item and a message item. The set item is the function to be invoked to validate a field’s value, returning true on successful validation and false on unsuccessful validation. The message item is the error message to be used when that validation fails.

The validationHooks object literal was inspired by jQuery’s CSS Hooks implementation. I suggest checking out how that works if you’re not completely clear how this is being done

Here is an example of how a custom validation type would be constructed:
HTML
Javascript
The custom validation created here validates whether or not the user has type the word “Awesome” in the field

Conclusion

There you have it, folks. That should be enough to get you through 90% of any validation you may need. However, if you wish to get your hands dirty and dig into the source feel free to fork it on GitHub and contribute. There’s always more work to be done