Examples

Try it now

1 Simple form

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

Notice: run this code after the DOM loaded!

// Get form handle
var formHandle = document.querySelector('form[name="demo-form-1"]');

// Got to validation
new Validator(formHandle, function (err, res) {

    // some code of success of validation
    return res;
});

2 If the fields of your form are dynamic

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

// Get form handle
var formHandle = document.querySelector('form[name="demo-form-2"]');

// Got to validation
new Validator(formHandle, function (err, res) {

    // some code of success of validation
    return res;
}, {
  	// set auto tracking forcibly
	autoTracking: true
});

3 You can use your custom rules

							// Get form handle
var formHandle = document.querySelector('form[name="demo-form-3"]'),
	options: {

		// set a custom rule
		rules: {
			milk: function (value) {
				return (value.trim().toLowerCase() === 'milk');
			}
		},

		// set a incorrect message text
		messages: {
			en: {
				milk: {
					incorrect: 'This is not a Milk ;-)'
				}
			}
		}
	};

// Got to validation
new Validator(formHandle, function (err, res) {
    return res;

}, options);
						

Documentation

How its work

var validator = new Validator(formHandle, [callback], [settings]);

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:

Form handle
Callback function

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

<!-- Your form -->
<form name="form" id="my-form">

	<!-- Required field email -->
	<input type="text" name="email" data-rule="required|email"/>

	<input type="submit" value="Submit"/>

</form>

<!-- Append the validator JS script -->
<script type="text/javascript" src="js-form-validator.js"></script>

<script>
	// Init validator with standart settings
	new Validator(document.querySelector('#my-form'), function (err, res) {
		return res;
	});
</script>

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:

messages: {
	localeName: {
		RuleName1: {
			empty: 'Message text for empty value',
			incorrect: 'Message text for incorrect value'
		},
		RuleName2: {
			empty: 'Message text for empty value',
			incorrect: 'Message text for incorrect value'
		}
		//..
	}
}

***rules - an object having the structure:

rules: {
	myCustomRulename: function (value, params) {
		//Your code here..
		//The function should return a boolean value
		//true - if the filed
	}
}

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

<input type="text" name="phone" data-rule="phone"/>

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

<input type="text" name="phone" data-rule="phone|required"/>

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

<input type="text" name="count" data-rule="between-5-9"/>

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»)	Hide errors for all fields or specified field

JS Form Validator

Pure Javascript. No jQuery

Overview

The next invention of the wheel?