Getting started

If you want to add validators programmatically, check out features on the core API and DSL API. For validation through markup, read on!

Include script

Download and include the script, preferably just before the closing body tag:

Mark forms for validation

Default behaviour is for Validatious to validate all your forms with the class name validate:

You can change the class name through v2.Form.autoValidateClass.

Add validators

Adding validators is as simple as adding validator names as class names to input/select/textarea elements:

<input type="text" name="email" id="email" class="required email" />

Prefix class names through v2.Validator.prefix.
Available validators.
Create your own validator.

Reasonable default error messages

Validatious guesses field names from label elements to make default error messages more usable:

Name

...yields "Name is required". So does this:

Enter name:

More on field names

Custom error messages

You can override all error messages for a single field through the input/select/textarea elements title attribute:

Name:

Translate and customize default messages

Scope validation

If your form has more than one button you may want some of your buttons (cancel and so on) not to trigger validation. Well, just add the class "action" to the buttons that should trigger validation:

Change class name through v2.Form.prototype.actionButtonClass.

Validate fields together in a group

Require atleast one field in a group to be valid by grouping fields in a div or fieldset with the class name "validate_any" (entering one valid phone number is sufficient for these three fields to pass validation):


  
    Home phone
    
  
  
    Cell phone
    
  
  
    Work phone

Complete tutorial (change class name, require all fields and more)

Validate radio buttons

You can add validators to a set of radio buttons by adding class names to only one element in the group:


  
    
    Apple
  
  
    
    Orange
  
  
    
    Pear

Validate checkboxes

Checkboxes can be validated just like radio buttons, however, they need to be explicitly grouped first, by giving all input elements a class name like g_:


  
    
    Onion
  
  
    
    Potato
  
  
    
    Tomato

More on radio buttons and checkboxes

Change validation timing

Validatious will validate your form when a submit button is clicked. When the form has been validated, Validatious will revalidate each field when they change. You can make Validatious validate each field whenever they change all the time:

v2.Field.prototype.instant = true;

...or only validate on submit:

v2.Field.prototype.instantWhenValidated = false;
v2.Field.prototype.instant = false;

More on validation timing

Styling errors

By default, Validatious will display all messages (one per validator/field combination that fails) above the failing field:


  
    Name is required
  
  First name

Tutorials and reference

There are more detailed guides in the features section. The reference section contains lists of all things Validatious, and is a great place to start if you're looking to tweak/change a specific feature.

All features.

Validatious 2.0