jQuery-bValidator

jQuery form validator

Installation

Install via bower

bower install --save jquery-bvalidator

Link library

<script src="bower_components/jquery-bvalidator/bvalidator.jquery.min.js"></script>

Handling form

Init form:

$('form').bValidator();

Default options

errorClass: 		'error',
errorMessageClass:	'error-message',
validClass: 		'valid',
rowClass: 			'row',
onFocusHideError: 	false			// Hide error after focusing input
onKeyUpValidate: 	false 			// If true, add extra on key up validation
domType:			'row'			// another option: 'direct'. Explained below
onValid: 			function(form, element) {} // Function triggered after succesfully validated element
onInvalid:       	function(form, element) {} // Function triggered after unsuccesfully validated element
beforeSubmit: 		function(form, event) {}	// Function triggered before submitting valid form
onSubmitFail: 		function(form, event) {}	// Function triggered after trying to submit invalid form
onFocusIn: 			function(form, element) {}	// Triggered after focusing element
onFocusOut: 		function(form, element) {}	// Triggered after focusing out of element
onKeyUp: 			function(form, element) {}	// Callback after pressing key when is input focused, only for onKeyUpValidate=true

Init form with all options:

$('form').bValidator({
	errorClass: 		'alert',
	errorMessageClass:	'alert-message',
	validClass: 		'success',
	rowClass: 			'form-controll',
	onFocusHideError: false, // no reason to allow in combination with onKeyUpValidate = true
	onKeyUpValidate: true,
	domType: 'direct',
	onValid: function(form, element) {
		console.log('Input with name ' + element.attr('name') + ' is valid');
	},
	onInvalid: function(form, element) {
		console.log('Input with name ' + element.attr('name') + ' is invalid');
	},
	onSubmitFail: function(form, event) {
		console.log('Some inputs are not valid');
	},
	beforeSubmit: function(form, event) {
		console.log('Validation success');
	},
	onFocusIn: function(form, element) {
		console.log('Input focused in');
	},
	onFocusOut: function(form, element) {
		console.log('Input focused out');
	},
	onKeyUp: function(form, element) {
		console.log('Key pressed over input');
	}
});

Remove validations:

$('form').bValidator('destruct');

HTML structure

You can choose html structure from two types (by domType option). In both cases, validation rules and other behavior are set by html data attributes.

Row structure

<form>
	<div class="row"> // this element can be span or any other
		<input type="text" data-bvStrict="rule">
		<span class="error-message">Input is not valid</span>
	</div>
	<div class="row">
		<input type="text" data-bvStrict="rule">
		<span class="error-message">Input is not valid</span>
	</div>
</form>

If input is invalid, validator adds error class to a .row element. If input is valid, validator adds valid class to a .row element. You can name classes for error/valid messages by your desire, but remember to give it 'display: none' property and change it via rows .error/.valid classes. HTML structure doesn't have to be flat, you can wrap inputs and messages into another elements.

Direct structure

<form>
	<label for="input1">First input</label>
	<input type="text" name="input1" data-bvStrict="rule">
	<span class="error-message error-input1">First Input is not valid</span>

	<label for="input2">Second input</label>
	<input type="text" name="input2" data-bvStrict="rule">
	<span class="error-message error-input2">Second Input is not valid</span>
</form>

If input is invalid, validator adds error class to an input, input labels and error message associated by its name. If input is valid, validator adds valid class to an input, input labels and error message associated by its name. HTML structure doesn't have to be flat, you can wrap inputs, labels and messages into another elements. Validator searches for labels and error messages only inside form element.

Working with inputs

Setting validation rules

You can set custom validation rule by adding data-bvStrict attribute to the input.

Validate input as email

data-bvStrict="email"

Validate input as czech phone number (9 digits)

data-bvStrict="phone"

Validate input as number

data-bvStrict="number"

Number > 1

data-bvStrict="number:1"

Number < 10

data-bvStrict="number::10"

Number between 1 and 10

data-bvStrict="number:1:10"

Input can't be empty

data-bvStrict="notEmpty"

Input has to be empty

data-bvStrict="empty"

Input has to be string

data-bvStrict="string"

Validate input as a date (wildcards allowed in format string: d, dd, m, mm, yy, yyyy. E.g. d/m/yy, d. m. yyyy, dd-mm-yyyy, yy, m, d)

data-bvStrict="date:format"

Always invalid input

data-bvStrict="false"

Always valid input

data-bvStrict="true"

Checkbox has to be checked

data-bvStrict="checked"

Validate input by regular expression

data-bvStrict="reg:^[\d]{2,3}$"

If regular expression contains | or &, it has to be inside double brackets {{ }}

data-bvStrict="reg:{{^him|her$}}"

Connected rules

Input has to have same value as input with name password

data-bvStrict="same:password"

Conditions

If input with name service is valid by rule checked, rule validates input by rule email If service is not valid, rule returns true

data-bvStrict="if:service:checked:email"

Adding regular expression rule. Whole rule has to be inside double brackets {{ }}, not just it's parameter

data-bvStrict="if:service:checked:{{reg:^him|her$}}"

data-bvStrict="if:type:{{reg:^4$}}:email"

If input with name service has value 4, rule validates input by rule email If service is not valid, rule returns true

data-bvStrict="ifv:service:4:email"

This does the same as

data-bvStrict="if:service:{{reg:^4$}}:email"

Combinating rules

Input has to be phone or email

data-bvStrict="phone|email"

Input has to be empty or valid email

data-bvStrict="empty|email"

Input has to be both string and number

data-bvStrict="string&number"

Input has to be phone or ( string and number ). & has higher priority than |

data-bvStrict="phone|string&number"

You can combine rules as you want

data-bvStrict="if:type:{{reg:^2$}}:email|if:type:{{reg:^4$}}:phone|same:password&reg:{{^[\d]{2,3}$}}"

Other input attributes:

Add prefix to a value. It's removed before submitting form and after focusing input.

data-bvPrepend="\+420 "

Add suffix to a value. It's removed before submitting form and after focusing input.

data-bvAppend=" kW"

Placeholder. It's removed before submitting form and after focusing input.

data-bvSwitch="Fill name"

Sets value to "@", if input is empty. It's removed before submitting form and after focusing input.

data-bvEmpty="@"

Erasing spaces from value

data-bvTransform="noSpaces"

Manually validate inputs:

$('inputs').bValidator('validate');

Check if inputs are valid

Returns false if at least one is invalid, otherwise true. This method does not display errors.

$('inputs').bValidator('isValid');

Validate with different rule

$('inputs').bValidator('isValid', Array('email'));

Custom rules

jQuery.bValidator.validation('rule_name', function(value, args, elem) {
	return true/false;
});

Custom transformer

jQuery.bValidator.transformation('transformation_name', function(value) {
	return new_value;
});