Simple Client-side Form Validation Plugin For jQuery - Validator

File Size: 254 KB
Views Total: 9534
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Client-side Form Validation Plugin For jQuery - Validator

Validator is a brand new jQuery form validation plugin that that makes it easy to add validation to existing form elements. Support mostly HTML/HTML5 standard input type attributes and custom validation rules & error messages.

How to use it:

1. Include jQuery JavaScript library and the jQuery Validator plugin in your project.

<script src="//"></script>
<script src="dist/validator.js"></script>

2. Apply validation rules to your form elements.

  // rules, options and callbacks

3. Validation rules available.

// Types

// Attributes

// Customs

4. Default settings.


// Type: Object
/* e.g.: {
minlength: 8,
maxlength: 16
} or {
rangelength: [8, 16]
} or {
rangelength: {
  message: 'Please enter a value between 8 and 16 characters long.',
  validator: function (value) {
    return /^.{8,16}$/.test(value);
} */
rules: null,

// The event(s) which triggers validating
// Type: String
trigger: '',

// Filter the value before validate
// Type: Function
filter: null,

// A shortcut of "success.validator" event
// Type: Function
success: null,

// A shortcut of "error.validator" event
// Type: Function
error: null


5. Default error messages.

// Types
number: 'Please enter a valid number (only digits).',
email: 'Please enter a valid email address.',
url: 'Please enter a valid URL.',
date: 'Please enter a valid date.',

// Attributes
required: 'This field is required.',
max: 'Please enter a value less than or equal to [0].',
min: 'Please enter a value greater than or equal to [0].',
maxlength: 'Please enter no more than [0] characters.',
minlength: 'Please enter at least [0] characters.',
pattern: 'Please enter a matched value.',

// Customs
range: 'Please enter a value between [0] and [1].',
rangelength: 'Please enter a value between [0] and [1] characters long.',
equalto: 'Please enter the same value again.'

6. Public methods.

// Update rule(s) from element attributes to validator instance.

// addRule(name, value)
$().validator('addRule', 'required', true);

// removeRule(name)
$().validator('removeRule', 'required');

// addValidator(name, value)
$().validator('addValidator', 'required', function (value) {
  return !!value;
$().validator('addValidator', {
  required: function (value) {
    return $.trim(value) !== '';

// removeValidator(name)
$().validator('removeValidator', 'required');

// Start a validation and return the reversed result.

// A shortcut of isValid method, means "√".

// A shortcut of isInvalid method, means "×".

// Destroy the validator and remove the instance from target element.

Change log:

v0.1.0 (2016-04-30)

  • Added a new method: "update".
  • The priority of rules option is greater than element attributes now.
  • Improved event binding.
  • Improved code style.
  • Improved documentation.

This awesome jQuery plugin is developed by fengyuanchen. For more Advanced Usages, please check the demo page or visit the official website.