Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


2.3.77 • Public • Published

jQuery Form Validator

jQuery Form Validator is a feature rich and multilingual jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code. Even though this plugin has a wide range of validation functions it's designed to require as little network traffic as possible. This is achieved by grouping together validation functions in "modules", making it possible to load only those functions that's needed to validate a particular form.

Form demos and full documentation available at


npm version

Usage example

<form action="" method="POST">
    Name (4 characters minimum):
    <input name="user" data-validation="length" data-validation-length="min4" />
    Birthdate (yyyy-mm-dd):
    <input name="birth" data-validation="birthdate" />
    <input name="website" data-validation="url" />
    <input type="submit" />
<script src="js/jquery.min.js"></script>
<script src="js/form-validator/jquery.form-validator.min.js"></script>
        modules : 'date, security'

Support for HTML5

This plugin can serve as a fallback solution for the validation attributes in the HTML5 spec. With the html5 module you can use the following native features:

Attributes: require, pattern, maxlength, min, max, placeholder

Input types: url, date, time, email, number

Elements: Use the element datalist to create input suggestions

Default validators and features (no module needed)

  • url
  • email
  • numberfloat/negative/positive/range/step
  • dateyyyy-mm-dd (format can be customized, more information below)
  • alphanumericwith support for defining additional characters
  • lengthmin/max/range
  • requiredno validation except that a value has to be given
  • customValidate value against regexp
  • checkboxgroupensure at least 1 checkbox in group has been selected
  • Show help information automatically when input is focused
  • Validate given values immediately when input looses focus.
  • Make validation optional by adding attribute data-validation-optional="true" to the element. This means that the validation defined in data-validation only will take place in case a value is given.
  • Make validation dependent on another input of type checkbox being checked by adding attribute data-validation-if-checked="name of checkbox input"
  • Create input suggestions with ease, no jquery-ui needed
  • to apply multiple validators to an input element, separate the validator names using a space (ex: required email)

Read the documentation for the default features at

Module: security

  • spamcheck
  • confirmation
  • creditcard
  • CVV
  • strengthValidate the strength of a password
  • serverValidate value of input on server side
  • letternumericValidate that the input value consists out of only letters and/or numbers
  • recaptcha - Validate Google reCaptcha 2

Read the documentation for the security module at

Module: date

  • timehh:mm
  • birthdateyyyy-mm-dd, not allowing dates in the future or dates that's older than 122 years (format can be customized, more information below)

Read the documentation for the date module at

Module: location

  • country
  • federatestate
  • longlat
  • Suggest countries (english only)
  • Suggest states in the US

Read the documentation for the location module at

Module: file

  • mime
  • extension
  • size (file size)
  • dimension (size dimension and ratio)

Read the documentation for the file module at

Module: logic

  • Dependent validation
  • Require "one-of"

Read the documentation for this module at

Module: sepa

  • IBAN
  • BIC
  • Sepa

Read the documentation for this module at

Module: sweden

  • swemobvalidate that the value is a swedish mobile telephone number
  • swesecvalidate swedish social security number
  • county - validate that the value is an existing county in Sweden
  • municipality - validate that the value is an existing municipality in Sweden
  • Suggest county
  • Suggest municipality

Read the documentation for the Swedish module at

Module: uk

  • ukvatnumber
  • uknin
  • ukutr

Read the documentation for the UK module at

Module: brazil

  • brphoneValidate a brazilian telephone number
  • cep
  • cpf

Module: poland

  • plpesel - validate polish personal identity number (in Polish identity cards)
  • plnip - validate polish VAT identification number
  • plregon - validate polish bussiness identity number

Module: sanitation

  • trim
  • trimLeft
  • trimRight
  • upper — Convert all letters to upper case
  • lower — Convert all letters to lower case
  • capitalize — Convert the first letter in all words to upper case
  • insertRight — Declare a text that should be inserted at the end of the value, attribute data-sanitize-insert-right
  • insertLeft — Declare a text that should be inserted at the beginning of the value, attribute data-sanitize-insert-left
  • escape — Convert < > & ' " to html entities
  • strip — Comma separated list with words that gets automatically removed
  • numberFormat — Declare the attribute data-sanitize-number-format with any of the formats described on Note that this rule requires that numeral.js is included in the page

Read the documentation for the sanitation module at

Writing a custom validator

You can use the function $.formUtils.addValidator() to add your own validation function. Here's an example of a validator that checks if the input contains an even number.

<form action="" method="POST">
        <input type="text" data-validation="even" />
<script src="js/jquery.min.js"></script>
<script src="js/form-validator/jquery.form-validator.min.js"></script>
    // Add validator
        name : 'even',
        validatorFunction : function(value, $el, config, language, $form) {
            return parseInt(value, 10) % 2 === 0;
        errorMessage : 'You have to answer an even number',
        errorMessageKey: 'badEvenNumber'
    // Initiate form validation

Required properties passed into $.formUtils.addValidator

name - The name of the validator, which is used in the validation attribute of the input element.

validatorFunction - Callback function that validates the input. Should return a boolean telling if the value is considered valid or not.

errorMessageKey - Name of language property that is used in case the value of the input is invalid.

errorMessage - An alternative error message that is used if errorMessageKey is left with an empty value or isn't defined in the language object. Note that you also can use inline error messages in your form.

The validation function takes these five arguments:

  • value — the value of the input thats being validated
  • $el — jQuery object referring to the input element being validated
  • config — Object containing the configuration of this form validation
  • language — Object with error dialogs
  • $form — jQuery object referring to the form element being validated

Creating a custom module

A "module" is basically a javascript file containing one or more calls to $.formUtils.addValidator(). The module file must be placed in the same directory as jquery.form-validator.min.js if you want it to load automatically via the setup function.

You can use the method $.formUtils.loadModules if you want to load the module from a custom path.

$.formUtils.loadModules('customModule otherCustomModule', 'js/validation-modules/');
   modules: 'security, date'

The first argument of $.formUtils.loadModules is a comma separated string with names of module files, without file extension.

The second argument is the path where the module files are located. This argument is optional, if not given the module files has to be located in the same directory as the core modules shipped together with this jquery plugin (js/form-validator/)

Show help information

It is possible to display help information for each input. The information will fade in when input is focused and fade out when input looses focus.

<form action="" id="my_form">
      <strong>Why not:</strong>
      <textarea name="why" data-validation-help="Please give us some more information" data-validation="required"></textarea>

Fully customizable

Read about how to customize this plugin over at

Validate On Event

You can cause an element to be validated upon the firing of an event, by attaching an attribute to the form input element named data-validation-event="click". When the configuration settings have validateOnEvent : true, the click event will trigger the onBlur validaton for that element. Possible use case: Checkboxes. Instead of waiting for the checkbox to lose focus (blur) and waiting for a validation to occurr, you can specify that elements validation should occur as soon as that checkbox element is clicked.


This plugin comes with translations for Catalan, Czech, Danish, Dutch, English, Farsi, French, Georgian, German, Italian, Korean, Norwegian, Polish, Romanian, Russian Portuguese and Swedish . You can also choose to override the error dialogs yourself. Here you can read more about localization




  • Now possible to create custom validators that is async. #609
  • New validator complexity that is used to configure and validate the complexity of passwords (an alternative to the strength validator). #368
  • New validation module color that can be used to validate rgb, rgba, hex and hsla.


  • This jQuery plugin can now be used together with Meteor without hassle.
  • The parameter eventContext gets passed along to validation functions. #489
  • Modules no longer has to be loaded over http using the built-in module loader. They may now also be part of a concatenated file that is sent directly to the browser via a script tag. #479
  • The validator birthdate now offers the configuration parameter data-validation-age-range. #320
  • New translations (Farsi, Georgian, Korean, Turkish and Vietnamese)

Bug fixes

  • Fixed bug in the Google reCaptcha validator that made it incompatible with the module toggleDisabled #605
  • The module toggleDisabled now has full support for async validators, eg. the server validator. #599
  • The module toggleDisabled now supports the validator checkbox-group #591
  • The module toggleDisabled now supports reset buttons #535
  • Correct handling of error messages when using data-validation-depends-on #594
  • This jQuery plugin now fully supports jQuery version >= 3.1 #588
  • Fixed bug in IBAN validator. #587
  • The validator country does now allow all countries included in the ISO 3166-1 standard. #562
  • All validators can now be used on inputs that isn't contained within a FORM element. #540
  • The validator mime (file module) now falls back on file name if the "type" can't be resolved by the browser. #523
  • An async validator won't overwrite the error message of a preceding validation. #502
  • The sanitize function strip now also supports stripping away numerals. #488


  • New translations (Polish, Romanian, Danish, Norwegian, Dutch, Czech, Russian, Italian)
  • Several improvements made to already existing translations
  • "Validation help" no longer puts constraints on input names
  • Improved confirmation validation
  • Config parameter errorMessagePosition is now only used to point out where error message should be placed. New configuration parameters is introduced that handles custom positioning of error messages #226
  • Now possible to add data-validation-ignore to filter out certain characters before validation
  • New sanitation method strip that removes defined characters
  • Now possible to declare attributes not prefixed with data-validation in jsconf module
  • All inputs gets sanitized on page load when using sanitation module
  • Allow dates to omit leading zero using data-validation-require-leading-zero="false"
  • Module toggleDisabled now acts on value change, not only mouse click
  • data-validation-if-checked now deprecated, use data-validation-depends-on instead #153
  • Event beforeValidation now gets value, language and configuration as arguments and can be used to prevent validation of the input.
  • Security module now has a recaptcha validator that uses Google reCaptcha 2
  • The plugin is installable using npm (also possible to require validation modules when using browserify)
  • Polish validation module
  • Brazilian validation module
  • UK validation module now also have validators uknin ukutr
  • Sepa-module that makes it possible to validate sepa, iban and bic.
  • New module named "logic" containing the features data-validation-depends-on and data-validation-optional-if-answered


  • The plugin is now again possible to install via bower.
  • Portoguese language pack and validators
  • New module used for data-sanitiation
  • E-mail addresses now validated in accordance to rfc 6531
  • Now possible to use $.fn.validate to programmatically validate inputs
  • Hidden inputs won't get validated by default (can be overriden using option validateHiddenInputs)


  • Fixed min/max parse error in HTML5 module
  • Now also supports Twitter bootstraps horizontal forms
  • This plugin now also distributes a default CSS theme including success/fail icons (used on
  • Email validation now won't fail if email begins with a number
  • This plugin now comes with error dialogs translated to English, French, German, Spanish and English.
  • New validator letternumeric. Validates that input consists out of any type of letter (not only alphanumeric) and/or numbers
  • You can now validate image dimension and ratio
  • ... and a bunch of other smaller bug fixes and improvements.


  • Now possible to define an error message for each validation rule on a certain input (issue #113)
  • This plugin now serves as a html5 fallback. You can now use the native attributes to declare which type of validation that should be applied.
  • Use a template for error messages when having errorMessagePosition set to top
  • Added validation of credit card number and CVV to the security module
  • Event onElementValidate added
  • Use the attribute data-validation-confirm to declare which input that should be confirmed when using validation=confirmation (issue #112)
  • Validation "required" now supports inputs of type radio
  • $.validateForm is now deprecated, use $.isValid instead
  • Possible to check if form is valid programmatically without showing error messages
  • Select elements can now be validated server-side
  • Cleaned up dialog messages
  • Various IE8 fixes
  • Possible to send along parameters to the server when using server side validation
  • Now possible to set your own parameter name when using server side validation
  • Improved/simplified URL validation
  • ... and a whole lot more small improvements


  • Incorrect error-styling when using datepicker or suggestions is now fixed
  • Incorrect error-styling of select elements is now fixed
  • Deprecated function $.validationSetup is now removed, use $.validate() instead
  • You can now return an array with errors using the event onValidate
  • You can now declare an element where all error messages should be placed (config.errorMessagePosition)


  • Now possible to use the native reset() function to clear error messages and error styling of the input elements



  • E-mail validation support .eu top domain
  • Improvements in server validation
  • Now possible to re-initiate the validation. This makes it possible to dynamically change the form and then call $.validate() again to refresh the validation (issue #59)
  • Number validation now supports range


  • E-mail addresses can now contain + symbol
  • Correction of the US states in validation "federatestate"
  • Fixed bug in server validation


  • File validation now support multiple files
  • Length validation can now be used to validate the number of uploaded files using a file input that supports multiple files
  • Validation classes is no longer applied on inputs that for some reason shouldn't become validated


  • Now possible to configure the decimal separator when validating float values. Use either the attribute data-validation-decimal-separator or the property decimalSeparator when calling $.validate()
  • $.validationSetup is renamed to $.validate. You will still be able to initiate the validation by calling the $.validationSetup but it's considered deprecated.


  • Modules can now be loaded from remote websites


  • Fixed language bug (issue #43 on github)
  • Validation on server side is now triggered by the blur event
  • Now using class names that's compliant with twitter bootstrap 3.x


  • Code refactoring and some functions renamed
  • Validator "checkbox_group" added


  • Now possible to validate file size, extension and mime type (using the file module)


  • [min|max]_length is removed (now merged with length validation).
  • The number, int and float validation is merged together, all three variants is now validated by the number validation.
  • Phone validation is moved to "sweden" module and renamed to swephone.
  • The attribute to be used when defining the regular expression for custom validations is now moved to its own attribute (data-validation-regexp)
  • Length validation now looks at attribute data-validation-length (eg. min5, max200, 3-12).
  • The validation rule no longer needs to be prefixed with "validate_" (it's still possible to use the prefix but it's considered deprecated).
  • Some validation functions is moved to modules (see the function reference over at
  • Added function $.validationSetup() to reduce the amount of code that has to be written when initiating the form validation.



npm i jquery-form-validator

Downloadsweekly downloads








last publish


  • avatar
Report a vulnerability