README
Dominar
Lightweight and highly configurable boostrap validator built on-top of validator.js.
Usage
var validator = new Dominar(document.getElementById('registration-form'), {
email: {
rules: 'required|email'
},
username: {
rules: 'required|min:3|max:10',
triggers: ['keyup', 'change', 'focusout'],
delay: 300
}
});
Note: See below for all possible options. Only rules
is required.
Demo
http://garygreen.github.io/dominar/
Installation
Bower
bower install dominar --save
NPM
npm install dominar --save
Browser
The main file to include is dist/dominar-standalone.js
. If you already have validator.js installed then just simply use dist/dominar.js
Main syntax
var validator = new Dominar(<form element>, <field options>, [dominar options]);
Available validation rules
accepted
alpha
alpha_dash
alpha_num
confirmed
digits:value
different:attribute
email
in:foo,bar,..
integer
max:value
not_in:foo,bar,..
numeric
required
same:attribute
size:value
url
regex:pattern
See here for more rules & usage details.
Custom validation rule
Dominar.Validator.register('uppercase', function(value) {
return value.toUpperCase() === value;
}, 'The :attribute must only be uppercase.');
Asynchronous / Ajax validation rules
Use Dominar.Validator.registerAsync
to register an asynchronous rule.
Dominar.Validator.registerAsync('username_availability', function(username, attribute, parameters, passes) {
// Below example assumes you are using jQuery.
$.get('/api/check-username', { username: username }, passes)
.fails(function(response) {
passes(false, response.message);
});
});
var dominar = new Dominar(document.getElementById('my-form'), {
username: {
rules: 'required|username_availability'
}
});
On your server return HTTP status code 200 if validation passes or if not, a 4xx
json response with the error message:
{"message": "Username already taken."}
HTML Structure
By default it is assumed your element is contained inside a .form-group
<div class="form-group">
<label>Username</label>
<input type="text" name="username"/>
</div>
You can change this by supplying the container
option e.g. container: 'td'
Custom error message
By default error messages are automatically generated for you. If you would like to customise, use the customMessages
option to specify a custom error message for the rules.
username: {
rules: 'required|min:5',
customMessages: {
required: 'Whoops, :attribute field is required!',
min: 'This needs more characters :('
}
}
Custom attribute names
By default attribute names are automatically generated in errors based on the name of the attribute. If you would like to override, use the customAttributes
option:
username: {
rules: 'required|min:5',
customAttributes: {
first_name: 'First Name'
}
}
Customising placement of error messages
Just manually add anywhere inside your .form-group
a .help-block
and dominar will automatically detect and use.
<div class="form-group">
<div class="help-block"></div>
<input type="text" name="username"/>
</div>
Note: by default dominar will automatically add errors message straight after the input
element.
Changing default options
If you want to change the default options you can simply overwrite on the prototype like in the below example. This is useful if you want to always use e.g. fontawesome icons instead of glyphicons. Of course these are just defaults and can still be customised on a per-field level.
// Below example assumes you are using jQuery.
Dominar.prototype.defaults = $.extend({}, Dominar.prototype.defaults, {
feedbackIcons: {
error: '<i class="fa fa-remove"></i>',
success: '<i class="fa fa-check"></i>'
}
});
Field Options
Option | Type | Description |
---|---|---|
rules | string | Set of rules seperated by pipe |
triggers | array/false | Determines when validation will be triggered on element. Set to false to turn off automatic triggering. |
delay | integer/false | Delay in triggering validation when typing in a field. Set to false to always trigger validation as soon as possible. |
delayTriggers | array | Determines when validation will be triggered as a delay on element. |
container | string | The selector for the element container |
message | boolean | Whether to display error messages or not |
customMessages | object | Set custom error messages for the rules |
feedback | boolean | Whether to display feedback icon or not |
feedbackIcons | object | Configure the success and error feedback icons |
Dominar options
Option | Type | Description |
---|---|---|
validateOnSubmit | boolean | Whether to validate the form on submit. |
Events
Dominar will fire various events on the form
. You can listen for the events like:
document.getElementById('my-form').addEventListener('dominarInitField', function(event) {
var dominar = event.detail.dominar; // The Dominar instance.
var field = event.detail.dominarField; // The DominarField which has been initialized.
});
The submit
event allows you to prevent the validation from occuring by preventing the default action:
document.getElementById('my-form').addEventListener('dominarSubmit', function(event) {
event.preventDefault(); // Prevent form from being validated
});
Name | Preventable | Description |
---|---|---|
dominarInitField | No | When a DominarField has been initialized (useful for adding additional event listeners to the input element etc) |
dominarSubmit | Yes | When form is about to be submitted and before validation check has been run. |
dominarSubmitPassed | Yes | When form passed validation and is about to be submitted. |
dominarSubmitFailed | No | When failed validation check when form was attempted to be submitted. |