ch.Validation
Description
Validation is an engine to validate HTML forms elements.
How-to
// Create a new Validation.
var validation = new ch.Validation(document.querySelector('.name-field'), [options]);
// Create a validation with with custom options.
var validation = new ch.Validation({
'conditions': [
{
'name': 'required',
'message': 'Please, fill in this information.'
},
{
'name': 'custom-email',
'fn': function (value) { return value === "customail@custom.com"; },
'message': 'Use a valid e-mail such as name@custom.com.'
}
],
'offsetX': 0,
'offsetY': 10,
'side': 'bottom',
'align': 'left'
});
Parameters
-
el
- HTMLElement : A HTMLElement to create an instance of ch.Validation. -
options
- Object : Options to customize an instance.-
conditions
- Array : A collection of conditions to validate.-
name
- String : The name of the condition. -
message
- String : The given error message to the condition. -
fn
- String : The method to validate a given condition.
-
-
reference
- HTMLElement : It's a reference to position and size of element that will be considered to carry out the position. -
side
- String : The side option where the target element will be positioned. Default: "right". -
align
- String : The align options where the target element will be positioned. Default: "top". -
offsetX
- Number : Distance to displace the target horizontally. Default: 10. -
offsetY
- Number : Distance to displace the target vertically. Default: 0. -
position
- String : The type of positioning used. Default: "absolute".
-
Extends
Properties
.bubble
Bubble
Is the little sign that popover showing the validation message. It's a Popover component, so you can change it's content, width or height and change its visibility state.
.Component#name
String
The name of a component.
.conditions
Object
The collection of conditions.
.error
Object
The current error. If the validations has not error is "null".
.form
form
Reference to a Form instance. If there isn't any, the Validation instance will create one.
.trigger
HTMLElement
The validation trigger.
.uid
Number
A unique id to identify the instance of a component.
.Validation#name
String
The name of the component.
Methods
-
condition
- String : A given number of fold to disable. -
condition
- String : A given number of fold to enable.
.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');
.disable(condition) → {validation}
Disables an instance of a validation or a specific condition.
// Disabling an instance of Validation.
validation.disable();
// Disabling the "email" condition.
validation.disable('email');
.enable(condition) → {validation}
Enables an instance of validation or a specific condition.
// Enabling an instance of Validation.
validation.enable();
// Enabling the "max" condition.
validation.enable('max');
.refreshPosition() → {validation}
Sets or gets positioning configuration. Use it without arguments to get actual configuration. Pass an argument to define a new positioning configuration.
// Change validaton bubble's position.
validation.refreshPosition({
offsetY: -10,
side: 'top',
align: 'left'
});
.clear() → {validation}
Clear active error.
// Clear active error.
validation.clear();
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys a Validation instance.
// Destroying an instance of Validation.
validation.destroy();
.hasError() → {Boolean}
Checks if the validation has got errors but it doesn't show bubbles.
// Checks if a validation has errors and do something.
if (validation.hasError()) {
// Some code here!
};
.isShown() → {Boolean}
Indicates if the validation is shown.
// Execute a function if the validation is shown.
if (validation.isShown()) {
fn();
}
.message() → {validation|String}
Sets or gets messages to specifics conditions.
// Gets a message from a condition
validation.message('required');
// Sets a new message
validation.message('required', 'New message for required validation');
.validate() → {validation}
Validates the value of $el.
Events
'clear'
It emits an event when a validation is cleaned.
// Subscribe to "clear" event.
validation.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 error event when a validation got an error.
// Subscribe to "error" event.
validation.on('error', function (errors) {
console.log(errors.length);
});
'ready'
Event emitted when the component is ready to use.
// Subscribe to "ready" event.
validation.on('ready', function () {
// Some code here!
});
'success'
It emits an event when a validation hasn't got an error.
// Subscribe to "success" event.
validation.on("submit",function () {
// Some code here!
});