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

Dominar options

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
});