DHTMLX Docs & Samples Explorer

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 by using

    dhxForm.validate();

Validation marks

When input fails validation it 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's data to it, blockable
  • onValidateSuccess - fires if validation check is positive for some field
  • onValidateError - fires if validation check is negative for some field
  • onAfterValidate - fires after validation, provides result of total validation

Validation rules

There are 3 types of rules

  1. standard rules
  2. custom rules
  3. regexps

Standard rules are 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);
    }

As fast validation definition, you can use regexp as value of validate attribute

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