Documentation | Husky Validation

Installation
Form Options
Field Options
Built-In Validators
Built-In Types
JavaScript API

Installation

Requirements:

JQuery
RequireJS
Globalize for Dates and Numbers

index.html

<form id="contact-form">
    [...]
</form>

<script type="text/javascript" src="jquery.js"></script>
<script data-main="app.js" type="text/javascript" src="require.js"></script>

app.js

requirejs.config({
    paths: {
        'globalize': 'bower_components/globalize/lib/globalize',
        'cultures': 'bower_components/globalize/lib/cultures'
    }
});
define(['js/form', 'globalize', 'cultures/globalize.culture.en-GB'], function(Form) {
    Globalize.culture('en-GB');
    var form = new Form($('#contact-form'));
});

Form Options

Name	data	Default	Description
debug	data-debug="true"	false	print debug messages
validation	data-validation="false"	true	load validation api
validationTrigger	data-validation-trigger="keyup forcusout"	'focusout'	default validate trigger
validationAddClasses	data-validation-add-classes="false"	true	add classes after validation (error / success)
validationSubmitEvent	data-validation-submit-event="false"	true	avoid submit if not valid
mapper	data-mapper="false"	true	load mapper api
type	data-type="date"	'string'	default type include all fields
validation*	data-validation-*="..."		default validation include all fields (Example: data-validation-required="true")

define(['js/form'], function(Form) {
    var form = new Form($('#contact-form'), {
        validation:false,
        mapper:false
    });
});

<form data-validation="false" data-mapper="false"></form>

Field Options

Name	Option	Default	Description
type	data-type="date" HTML5-Type type="date"	'string'	Type of the Element
validationTrigger	data-trigger="focusin focusout"	'focusout'	default validate trigger
validationAddClasses	data-validation-add-classes="true"	true	add error and success classes
validationAddClassesParent	data-validation-add-classes-parent="true"	true	add classes to parent element

<input type="text"
       data-validate="true"
       data-trigger="keyup"
       data-prop="birthDay"/>

Built-In Validators

Name	API	Description
Required	data-validation-required="true" HTML5-Attribute required="required"	Validate that a required field has been filled.
Max	data-validation-max="100" HTML5-Attribute max="100"	Validates that a given number is less than some maximum number.
Min	data-validation-min="20" HTML5-Attribute min="100"	Validates that a given number is greater than some minimum number.
Min Length	dta-validation-min-length="3"	Validates that the length of a string is at least as long as the given limit.
Max Length	data-validation-max-length="10"	Validates that the length of a string is not larger than the given limit.
Unique	data-validation-unique="groupname"	Validates whether a value is unique in a specific group of values or not.
Equal	data-validation-equal="groupname"	Validates whether all values in the group are equal.
Regex	data-validation-regex="/^[0-9 +-]$/gi" HTML5-Attribute pattern="/^[0-9 +-]$/gi"	Validates the value against pattern.

Built-In Types

Name	API	Description
Date	data-type="date" HTML5-Type type="date" HTML5-Type type="time" HTML5-Type type="datetime"	Validates that a value is a valid ISO date/time/datetime.
Decimal HTML5-Type type="number"	data-type="decimal"	Validates that a value is a valid number.
Email HTML5-Type type="email"	data-type="email"	Validates that a value is a valid email address.
Url	data-type="url" data-type-strict="true" HTML5-Type type="url"	Strict=false: Validates that a value is a valid url. Strict=true: Validates that a value is a valid strict URL, ie: with one of http, https, ftp, git allowed protocols.

JavaScript API

Form

Name	Return	Description	Example
Create	Object	Bind to a form	var form = new Form($('#contact-form'));
Get	Object	Get the Object for form	var form = $('#contact-form').data('form-object')
Validate	Boolean	Revalidate Form	form.validation.validate([force])
isValid	Boolean	Get last Validation result	form.validation.isValid()
Add Field		Add a field to Form	form.addField('#date-field')
Remove Field		Remove a field from Form	form.removeField('#date-field')
Initialized	Deferred	Get Deferred Object get Information here!	form.initialized.then(function(){})

Validation

Name	Return	Description	Example
Add Constraint		Add a Constraint to a field	form.validation.addConstraint('#field', 'minlength', {minlength: 6})
Update Constraint	boolean	Update a Constraint from a field	form.validation.updateConstraint('#field', 'minlength', {minlength: 6})
Delete Constraint		Delete a Constraint from a field	form.validation.updateConstraint('#field', 'minlength')

Mapper

Name	Return	Description	Example
Set Data		Set data to form, the form will be filled with the given data	form.mapper.setData({name: 'TEST'})
Get Data	Object	Get data to form, the result will be filled with the data of the form	form.mapper.getData()
Add Filter for array		Filter an array when getData is called	form.mapper.addArrayFilter('phones', function(item){ return item.phone != ''; })
Remove Filter for array		Remove the filter	form.mapper.removeArrayFilter('phones')

Element

Name	Return	Description	Example
Get	Object	Get the element for field	var element = $('#field').data('element')
Validate	Boolean	Revalidate Field	element.validate([force])
Update	Boolean	Update Field	element.update()
Add Constraint		Add a Constraint to a field	element.addConstraint('minLength', {minLength: 6})
Update Constraint		Update a Constraint from a field	element.updateConstraint('minLength', {minLength: 6})
Delete Constraint		Delete a Constraint from a field	element.updateConstraint('minLength')
Has Constraint		Has the field a Constraint with given name	element.hasConstraint('minLength')
Get Constraint	Validator\|false	Get the Constraint with given name	element.getConstraint('minLength')
Set Value		Set value	element.setValue('TEST')
Get Value	Object	Get value	element.getValue()
Initialized	Deferred	Get Deferred Object get Information here!	element.initialized.then(function(){})

CSS Classes

Name	Class name	Description	Example
Error	husky-validate-error	The field validation is failed	Error
Success	husky-validate-success	The field validation where successfully	Success