ch.Form (Class)

Documentation updated on Fri Jul 06 2012, generated by JsDoc Toolkit.

Overview

ch.Form extends ch.Controllers. Forms is a Controller of DOM's HTMLFormElement.

Returns

itself

Use

Create a new Form.

var widget = $(".example").form();

Create a new Form with some messages that will be use the validation engine.

var widget = $(".example").form({
	"messages": {
		"required": "Error message for all required fields.",
		"email": "Show this message on email format error."
	}
});

Configuration

The following options lets you create a customized ch.Form:

conf: Object Object with configuration properties.
conf.messages: Object

Returns

Properties

element

Reference to a DOM Element. This binding between the component and the HTMLElement, defines context where the component will be executed. Also is usual that this element triggers the component default behavior.

HTMLElement

type

This public property defines the component type. All instances are saved into a 'map', grouped by its type. You can reach for any or all of the components from a specific type with 'ch.instances'.

string

uid

The 'uid' is the Chico's unique instance identifier. Every instance has a different 'uid' property. You can see its value by reading the 'uid' property on any public instance.

number

Methods

children()

Watcher instances associated to this controller.

clear()

Use this method to clear al validations.

Returns

itself

content(content)

Sets and gets component content. To get the defined content just use the method without arguments, like 'widget.content()'. To define a new content pass an argument to it, like 'widget.content("new content")'. Use a valid URL to get content using AJAX. Use a CSS selector to get content from a DOM Element. Or just use a String with HTML code.

It method borrows ch.Uiobject#content.

Parameters

content: string Static content, DOM selector or URL. If argument is empty then will return the content.

Examples

Get the defined content

widget.content();

Set static content

widget.content("Some static content");

Set DOM content

widget.content("#hiddenContent");

Set AJAX content

widget.content("http://chico.com/some/content.html");

getStatus()

Return the status value.

Returns

itself

messages()

Collection of messages defined.

off(event, handler)

Removes a callback function from specific event.

It method borrows ch.Object#off.

Parameters

event Since version 0.7.1: string Event nawidget.
handler Since version 0.7.1: function Handler function.

Returns

itself

Examples

Will remove event handler to the "ready" event

var startDoingStuff = function () {
    // Some code here!
};

widget.off("ready", startDoingStuff);

on(event, handler)

Add a callback function from specific event.

It method borrows ch.Object#on.

Parameters

event Since version 0.7.1: string Event nawidget.
handler Since version 0.7.1: function Handler function.

Returns

itself

Examples

Will add a event handler to the "ready" event

widget.on("ready", startDoingStuff);

once(event, handler)

Add a callback function from specific event that it will execute once.

It method borrows ch.Object#once.

Parameters

event Since version 0.8.0: string Event nawidget.
handler Since version 0.8.0: function Handler function.

Returns

itself

Examples

Will add a event handler to the "contentLoad" event once

widget.once("contentLoad", startDoingStuff);

reset()

Use this method to clear al validations.

Returns

itself

submit()

This methods triggers the 'beforSubmit' callback, then will execute validate() method, and if is defined triggers 'onSubmit' callback, at the end will trigger the 'afterSubmit' callback.

Returns

itself

validate()

Executes all children's validations, if finds a error will trigger 'onError' callback, if no error is found will trigger 'onValidate' callback, and allways trigger 'afterValidate' callback.

Returns

itself

Events

afterSubmit

Fired after the form's submition.

Examples

widget.on("afterSubmit",function () {
	this.reset();
});

afterValidate

Fired when the validations end.

Examples

widget.on("afterValidate",function () {
	sowidget.action();
});

beforeSubmit

Fired before the form's submition.

Examples

widget.on("beforeSubmit",function () {
	sowidget.action();
});

beforeValidate

Fired before the validations engine start.

Examples

widget.on("beforeValidate",function () {
	sowidget.action();
});

clear

Fired when clean the form's data.

Examples

widget.on("clear",function () {
	this.reset();
});

error

Fired when the form fall on a error.

Examples

widget.on("error",function () {
	sowidget.action();
});

ready

Triggers when the component is ready to use (Since 0.8.0).

Examples

Following the first example, using widget as form's instance controller:

widget.on("ready",function () {
	this.reset();
});

reset

Fired when resets the form.

Examples

widget.on("reset",function () {
	sowidget.action();
});

submit

Fired when submits the form.

Examples

widget.on("afterSubmit",function () {
	sowidget.action();
});

validate

Fired when the form validates.

Examples

widget.on("validate",function () {
	sowidget.action();
});