Custom Validation Methods

jQuery Form Validate allows you to create custom validation methods. This allows you to run custom logic to do many cool things (like synchronous AJAX calls to a database to see if some input is valid). Like every option available in jQuery Form Validate, custom validation methods can be declared globally or locally. Creating custom methods globally allows you to reuse that method across multiple forms. A local scope, on the other hand, only allows for you to use that custom method on an individual form.

HTML Markup

The HTML markup for custom validation methods is exactly the same as other validation methods. The HTML data attributes are lowercase and separated by dashes.

<input type="text" id="name" name="name" title="Name" data-is-not="vic bob tom sam">

In the example above we have added a data attribute data-is-not and we have added four parameters: vic, bob, tom and sam.

Method

Naming

The JavaScript method name is not the same as the data attribute. We remove the data- part and camelCase the rest - resulting in isNot as our method name.

Design

Each validation method receives two parameters, input and params. The input parameter contains the value of the input. If the user inputs "asdf" then the value of input will be "asdf". The params parameter contains the values that we provided the HTML data attribute. In the example above that would be vic, bob, tom and sam. params, as you might have guessed are space-delimited.

The basic layout of our method is now:

isNot: function(input, params) {
	// input = "asdf"
	// params = ['vic', 'bob', 'tom', 'sam']
}

A validation method must return either true or false. Let's add some simple code to make sure the user did not enter one of our basic names:

isNot: function(input, params) {
	return $.inArray(input.toLowerCase(), params);
}

At this level our custom validation function is complete. All we need to do now is merge it into our jQuery Form Validation settings object. Once again, we can do that either globally or locally.

Globally

jQuery.extend(true, jQuery.fn.formvalidate.options.validations, {
	isNot: function(input, params) {
		return $.inArray(input.toLowerCase(), params);
	}
});

Locally

$('form').submit(function(e) {
	e.preventDefault();
	$(this).formvalidate({
		validations: {
			isNot: function(input, params) {
				return $.inArray(input.toLowerCase(), params);
			}
		}
	});
});

Language

If the above validation fails the user is then presented with a default failure message. This can be customized if you like.

Globally

jQuery.extend(true, jQuery.fn.formvalidate.options, {
	validations: {
		isNot: function(input, params) {
			return $.inArray(input.toLowerCase(), params);
		}
	},
	localization: {
		en: {
			failure: {
				isNot: 'Name not original enough.'
			}
		}
	}
});

Locally

$('form').submit(function(e) {
	e.preventDefault();
	$(this).formvalidate({
		validations: {
			isNot: function(input, params) {
				return $.inArray(input.toLowerCase(), params);
			}
		},
		localization: {
			en: {
				failure: {
					isNot: 'Name not original enough.'
				}
			}
		}
	});
});