Validation (a.k.a. Watcher)

Documentation updated on December 7th.

Description

The Validation (before v0.10.2, called Watcher) is an engine for web forms. Each one sends a feedback message to the end user.

Demo

Code snippet

<form ... >
	<div class="ch-for-row">
		<label class="required" for="example">E-mail:</label>
		<input id="example" type="email" required="required">
	</div>
	<p class="ch-form-actions">
		<input type="submit" value="Submit form" class="ch-btn ch-btn-small">
	</p>
</form>

Circular reference

Each instance of Validation must have a reference with a Form component instance. If any explicit instance wasn't created, the Validation component will create a Form component.

The Form and Validation make a circular reference between themselves. The Form knows the Validation and the Validation knows the Form.

This is the way to create a new Validation:

 
var foo = $("#example").validation(CONFIGURATION_OBJECT);

When you instance a Validation it returns a control object. It gives you information about the instance and some methods to manipulate the Validation.

Interfaces

Instead of use the ch.validation method you can use the interfaces. Each one of this has their own configuration object.

The custom() interface

It allows you to add a personalized validation.

var foo = $("demo_custom").custom();

Read more about Custom.

The required() interface

It makes the field to be required.

var foo = $("demo_required").required();

Read more about Required.

The string() interface

It validates that the field only have words with letters a-z and A-Z.

var foo = $("demo_string").string();

Read more about String.

The email() interface

It validates that the field is a valid e-mail.

var foo = $("demo_email").email();

Read more about Email.

The url() interface

It validates that the field is a valid url.

var foo = $("demo_url").url();

Read more about Url.

The maxLength() interface

It validates that the field length is lower than the indicated value.

var foo = $("demo_maxLength").maxLength();

Read more about MaxLength.

The minLength() interface

It validates that the field length is greater than the indicated value.

var foo = $("demo_minLength").minLength();

Read more about MinLength.

The number() interface

It validates that the field is valid number.

var foo = $("demo_number").number();

Read more about Number.

The max() interface

It validates that the field is a smaller number than the indicated value.

var foo = $("demo_max").max();

Read more about Max.

The min() interface

It validates that the field is a bigger number than the indicated value.

var foo = $("demo_min").min();

Read more about Min.

The price() interface

It validates a valid price format number.

var foo = $("demo_price").price();

Read more about Price.

More validations by field

If you need multiple validation on the same field, you can use the and method to concatenate like this:

var myValidations = $("#example").min(13).and().max(20);