Validatious 2.0

Easy form validation with unobtrusive JavaScript

Validate one or all fields in a group

Sometimes you may want the user to successfully complete one field or another (or more generally: one part of the form or another), and don't really care which one is entered, as long as one of them are valid.

By grouping fields with a div or a fieldset and adding the class name validate_any, the form will pass validation as long as one of the fields inside the block passes validation.

  ...

Note: You may change the class name to use on the block element through v2.html.validateAnyClass. More on configuring Validatious

Example

The following form asks for a name and a phone number. However, it's possible to enter several phone numbers should you want to. We don't really care which one the user enters, as long as she enters atleast one phone number.

Name

Home phone

Cell phone

Work phone

  

    

      Name
      
    
    

      

        Home phone
        
      
      

        Cell phone
        
      
      

        Work phone
        
      
  
  

    

  

DRYing up shared validators

The previous example can be slightly improved. You may have noticed that we used the required and phone validators for all fields inside the block. Any validator that applies to all fields inside the block may be set on the block itself:

  ...

This will add the required and phone validators to all fields inside the block.

The error messages in the previous example wasn't exactly helpful either. Luckily we can set a global error message for the whole block in the same way we can with single fields: through the title attribute:

  ...

Name

Home phone

Cell phone

Work phone

  

    

      Name
      
    
    

      

        Home phone
        
      
      

        Cell phone
        
      
      

        Work phone
        
      
  
  

    

  

You can mix validators applied to the block with validators applied on individual fields. You can also nest block elements.

You can also use the class validate_all (v2.html.validateAllClass) on a block to require all fields to validate. This will in effect be the same as no class name on the block. The only difference will be in how error messages are displayed.

Next: Negate validators | Back to HTML extension features index