This is a helpful validator object.
Switch branches/tags
Nothing to show
Pull request Compare This branch is 4 commits ahead of 7LayersDesign:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

This is a nifty little JavaScript validator object, inspired by "JS Patterns." It offers a convenient method to extend the validation options as well.

Step 1

For a crash-course, first, reference the Validator.js file in your project. At the bottom is fine.

Step 2

Next, you certainly need some data to work with -- probably coming from a form. Something like this...

var formData = {
	firstName : 'Jeffrey',
	lastName : '',
	occupation : 'web developer',
	age : '',
	emailAddress : 'jeff_way@yahoodotcom',
	password : 'mypass',
	passwordVerify: 'mypass'

Once you have the necessary data in object-form, you can apply the configuration settings.

 // Here, we set up our rules for each field.
// If a field doesn't require validation,
// just leave it out (like occupation).
Validator.config = {
	firstName : 'required',
	lastName : 'required', // only for example
	age : ['required', 'number'],
	emailAddress : 'email',
	passwordVerifiy : 'sameAs_password'

You can apply configuration settings by referencing Validator.config. Notice how the config properties refer to the form data names. Note that you can either add a single validation rule, or multiple ones, by wrapping them in array (see age property above).

Step 3

Finally, you call the validate method.


if ( Validator.hasErrors() ) {
} else {
	alert('No errors. Now update a database or something.');

Above, we call the "validate" method, and pass in the object that we wish to validate against (formData). Once this method runs, if there are errors, they will applied to Validate.messages. However, a convenience method is provided, Validator.hasErrors() that will perform the obvious for you. If there aren't errors, you can proceed, and rest assured that the submission passes validation. (Don't forget a server-side fallback, though!)

Built-in Rules

I've added an initial batch of rules. They can be applied within Validator.config, like so:

Validator.config = {
	firstName : ['min_8', 'required'],
	age : ['required', 'number'],
	emailAddress : 'email'
  • required: Field must contain a value
  • number: Field must be a number
  • email: Field must be a valid email address
  • min_INT:Number of characters must be at least INT. Replace INT with any whole number.
  • max_INT: Opposite of the one above.
  • sameAs_PROP: Ensures that two values are the same. Could be used for password comparision. Change "PROP" to a property name.

Adding Custom Rules

You'll certainly (myself included) want to extend this for your needs. You can either update the ValidationRules object, from Validator.js, or you can alternatively add additional rules by adding a new object to Validator.validationRules.

Validator.validationRules.greaterThanFiveChars = {
	validate : function(value) {
		return value.length > 5;
	errorMessage : 'Input must be at least six characters'

Note that you must apply:

  • validate: A method that performs your desired "check."
  • errorMessage: Your desired error message, if the test fails.

This script was a quickie; so please let me know if you notice any issues/improvements. :)

Current Status of Validator

  • Still sloppy, with some duplicate code. Need to find some time to clean it all up.
  • Starting to think that it will be more user-friendly to embed the validation rules directly into the form mark-up. Might switch over...