API

Full API documentation.

ch.Form

Description

Form is a controller of DOM's HTMLFormElement.

How-to

// Create a new Form.
var form = new ch.Form(el, [options]);
// Create a new Form with custom messages.
var form = new ch.Form({
    'messages': {
         'required': 'Some message!',
         'email': 'Another message!'
    }
});

Parameters

  • el - HTMLElement : A HTMLElement to create an instance of ch.Form.
  • options - Object : Options to customize an instance.
    • messages - Object : A collections of validations messages.
      • required - String : A validation message.
      • string - String : A validation message.
      • url - String : A validation message.
      • email - String : A validation message.
      • maxLength - String : A validation message.
      • minLength - String : A validation message.
      • custom - String : A validation message.
      • number - String : A validation message.
      • min - String : A validation message.
      • max - String : A validation message.

Extends

Properties

.Component#name String

The name of a component.

.container HTMLElement

The form container.

.errors Array

A collection of active errors.

.Form#name String

The name of the component.

.uid Number

A unique id to identify the instance of a component.

.validations Array

A collection of validations instances.

Methods

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys an instance of Component and remove its data from asociated element.

// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;

.disable() → {component}



    

Disables an instance of Component.

// Disabling an instance of Component.
component.disable();

.enable() → {component}



    

Enables an instance of Component.

// Enabling an instance of Component.
component.enable();

.require() → {component}



    

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');

.clear() → {form}



    

Clear all active errors.

// Clear active errors.
form.clear();

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys a Form instance.

// Destroy a form
form.destroy();
// Empty the form reference
form = undefined;

.hasError() → {Boolean}



    

Checks if the form has got errors but it doesn't show bubbles.

// Checks if a form has errors and do something.
if (form.hasError()) {
    // Some code here!
};

.reset() → {form}



    

Clear all active errors and executes the reset() native mehtod.

// Resets form fields and clears active errors.
form.reset();

.validate() → {form}



    

Executes all validations.

Events

'beforevalidate'



    

It emits an event when the form will be validated.

// Subscribe to "beforevalidate" event.
component.on('beforevalidate', function () {
    // Some code here!
});

'clear'



    

It emits an event when the form is cleaned.

// Subscribe to "clear" event.
form.on('clear', function () {
    // Some code here!
});

'destroy'



    

Emits when a component is destroyed.

// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});

'disable'



    

Emits when a component is disable.

// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});

'enable'



    

Emits when a component is enabled.

// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});

'error'



    

It emits an event when a form has got errors.

// Subscribe to "error" event.
form.on('error', function (errors) {
    console.log(errors.length);
});

'ready'



    

It emits an event when the form is ready to use.

// Subscribe to "ready" event.
form.on('ready', function () {
    // Some code here!
});

'reset'



    

It emits an event when a form resets its fields.

// Subscribe to "reset" event.
form.on('reset', function () {
    // Some code here!
});

'success'



    

It emits an event when a form hasn't got errors.

// Subscribe to "success" event.
form.on("submit",function () {
    // Some code here!
});
// Subscribe to "success" event and prevent the submit event.
form.on("submit",function (event) {
    event.preventDefault();
    // Some code here!
});