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