canuk / dominar

Lightweight bootstrap validator inspired by Laravel

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.