DHTMLX Docs & Samples Explorer

Index
dhtmlxForm
Controls Operations

# Validation

## Enabling validation

To enable validation you need to specify validation property|attribute for the input element

    var formData = [
          {type: "text", name: "UserName", value: "", label: "User Name", validate: "NotEmpty"}
       ];
    var dhxForm = new dhtmlXForm("dhxFormObj", formData);

or

    <input validate="NotEmpty" type="text">

With such markup, each time when you will try to save data, validation will fire. Also you can force form validation using:

    dhxForm.validate();

## Validation marks

When input fails validation it's marked with 'dhtmlx_validation_error' css class. So if you want to define custom styling you need to set those rule:

    .dhtmlx_validation_error{
          ... any custom marking rules here ...
    }

The custom messages can be added by using validation events.

## Validation events

There are four validation events:

- onBeforeValidate - starts before validation and allows to prepare input data to it (blockable)
- onValidateSuccess - fires if validation check for some field is positive
- onValidateError - fires if validation check for some field is negative
- onAfterValidate - fires after validation, provides result of total validation

## Validation rules

There are 3 types of rules:

1. standard rules
2. custom rules
3. regural expressions

Standard rules are the next:

- Empty
- NotEmpty
- ValidBoolean
- ValidEmail
- ValidInteger
- ValidNumeric
- ValidAplhaNumeric
- ValidDatetime
- ValidDate
- ValidTime
- ValidIPv4
- ValidCurrency
- ValidSSN
- ValidSIN

    <input type="text" validate="ValidEmail" >

Custom rules can be created by defining custom function and using its name as validation rule.

    <input type="text" validate="Greater100" >

    function Greater100(data){
               return (data>100);
    }

You can use a regural expression as value of validate attribute:

    <input type="text" validate="[0-9]+" >