JS Form Validator

Pure Javascript. No jQuery

Form validation on native javascript. Without dependencies.
Full customization. MIT Licence

Overview

The next invention of the wheel?

Yes! We present you a very simple solution for validating HTML forms. If you do not want to pull a MB of JS dependencies, like, «jQuery» just for the sake of checking the correctness of the entered user data, then our solution will suit you.

Examples

Try it now

1 Simple form

Sign up
Join the community

To run, you just need to specify the form and the callback function

Notice: run this code after the DOM loaded!

2 If the fields of your form are dynamic

Interests
A few words about what you love
Create new field

By default, parameter «autoTracking» is equal to «true»

If the fields of your form are dynamic, just use «Form Validator» as usual or set this parameter as «true» forcibly

3 You can use your custom rules

Milk
Just write the word «Milk»*
*Imagine that we need to get a specific word from the user

Documentation

How its work

HTML. Apply «[data-rule]» attribute for each form element that you want to check, or the attribute value, specify the name of one or more rules.

Javascript. You need to create an instance of Validator and pass it two parameters:

Callback function has two arguments: err and res. If the form has a validation error, the argument err will be the Object, and if there are no errors - null. Argument res returns a boolean value (true or false) and there is always.

 

Full code listing

 

Settings

Name Type Default Description
onAir Boolean true Validation of a current field after the events of «change», «keyup», «blur»
showErrors Boolean true Show errors automatically
autoHideErrors Boolean false Auto-hide the error messages
autoHideErrorsTimeout Integer 2000 Timeout auto-hide error messages
errorClassName String error Class name for invalid input and error message element
removeSpaces Boolean false Remove spaces from validation field values before validation
autoTracking Boolean true Tracking of new elements
locale* String en Language error messages
messages** Object { } Object for custom error messages
rules*** Object { } Object for custom rules

*locale - location index for message object.

**messages - an object having the structure:

***rules - an object having the structure:

 

Rules

For the attaching of the rules, you have to add the attribute «[data-rule]» to the form element, and as value is rule name

For a form element, you can use a few rules that are listed through the separator «|»

Some rules may have parameters. The parameters must be separated by the symbol «-»

 

List of rules

Name Parameters Example Description
notzero - notzero The value can not be zero
integer - integer Value must be an positive integer
float - float The value must be a floating point number
name - name The correct name. Use spaces, letters of the alphabet and the symbol «-»
lastname - lastname The correct lastname. Use spaces, letters of the alphabet and the symbol «-»
phone - phone The correct phone number
email - email The correct email address
min numeric min-10 The value must not be less than the value specified in the first parameter
max numeric max-34 The value must not be greater than the value specified in the first parameter
between numeric-numeric between-5-15 The value must be between the values ​​specified in the first and the second parameter
length numeric-numeric length-2-100 The number of characters value must be between the values ​​specified in the first and the second parameter
minlength numeric minlength-8 The number of characters value must not be less than the value specified in the first parameter
maxlength numeric maxlength-50 The number of characters value must not be greater than the value specified in the first parameter
maxfilesize numeric-units maxfilesize-2.5-MB The size of one or more selected files must not be greater than the value specified in the first parameter
fileextension string-[string] fileextension-jpg-png-gif Extension of one or more selected files must match one of the values ​​passed in the parameters

 

Api

Name Reuired parameters Optional parameters Description
validate - HTML Object - Specified validation field Start validation for all form or specified field. Return value - Object of errors or true
destroy - - Destroy validator
reload - - Reload validator
getFormHandle - - Return current form handle
getFields - - Return array of all validation fileds
showErrors - HTML Object - Specified validation field Show errors for all fields or specified field
hideErrors - HTML Object - Specified validation field
Boolean - Remove CSS error classes (See option «errorClassName»)
Show errors for all fields or specified field

Download

Get the source code

 

Follow Us

Vkontakte
Google+
Pinterest