To consume templates in javascript you can use the following to read from template files:

var template = Templates.get(url_to_template);

The templating functionality caches the template when loaded first time and all the subsequent calls to get the template will get it from cache.

To fill template with data you can use underscore template method:

var compiled = _.template(template, {firstName: 'John', lastName: 'Smith'});

To validate fields in a form just add validation class to each field you want to validate. For different kinds of validations you have to add respective validation classes to the fields. Validations included in this library are:

• validate-required - Validates that field value is non-empty.
• validate-number - Validates that field value is a valid number.
• validate-money or validate-positive-number - Validates that field value is a valid number and is positive.
• validate-email - Validates that field value is a valid email address.
• validate-digits - Validates that field value contains only numerical digits. For e.g.: phone number etc
• validate-compare - Validates that field value is matches other field value. Can be used for password comparison. Specify field to compare to by data-compare-id attribute.
• validate-minlength - Validates that field value is of a specified minimum length. Specify minimum length by data-min-length addribute
• validate-maxlength - Validates that field value is under a specified maximum length. Specify maximum length by data-max-length addribute

Validation triggers when the field loses focus. It has its pre-defined set of validation error messages for each validation. If you want to specify your own error message you can do it by adding an attribute which is of format data-{validation name}-message . For example for required field validation you can specify as data-required-message .

If you want to validate the entire form before submitting it, you can do it using:

Validation.validateForm(form_id)

Example:

Validation has its own styling. If you want to apply your own styling, please see css/validation.css.

Ajax Calls

I have built some helper functions on top of jQuery ajax and jQuery ajax form to extract some functionalities which are commonly used:

• Ajax.callHandler(type, url, data, callback, isGlobal, async, errorHanlder) - Generic call handler for all request types(GET, POST, DELETE etc).
• Ajax.getJson(url, data, callback, isGlobal, async, errorHanlder) - GET call handler for with JSON response.
• Ajax.postForJSON(url, data, callback, isGlobal, async, errorHanlder) - POST call handler for with JSON response.

Arguments for above methods:

type

(String) Request type(GET, POST, PUT, DELETE etc).

url

(String) Request URL.

data

(PlainObject or String) Data to be sent with the request.

callback

(Function) Callback method when the request is completed.

isGlobal

(Boolean) Whether to trigger global Ajax event handlers for the request.

async

(Boolean) Whether the request is asynchronous or synchronous.

errorHandler

(Function) Optional callback method when there is an error during request.

For more details on jQuery ajax refer to https://api.jquery.com/jQuery.ajax/

Ajaxifying Forms

I have added one method on top of jquery ajax form to simplify its usage:

Ajax.ajaxForm(id, success, beforeSubmit, errorHanlder)

Arguments for this method:

id

(String) Id of the form.

success

(Function) Callback method when the form is successfully submitted.

beforeSubmit

(Function) Callback method before the form is submitted. Validations can be performed in this method.

errorHandler

(Function) Optional callback method when there is an error during request.

For more details on jQuery ajax forms refer to http://malsup.com/jquery/form/#options-object