Validation

To enable validation you need to specify property validate and set it to the desired rule.

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

You can specify several validation rules at once, by separating them with comma.

var formData = [{type: "input", name:"dateOfbirth", label: "Date of Birth", validate:"NotEmpty,ValidNumeric"}];
var dhxForm = new dhtmlXForm("dhxFormObj", formData);

With such markup, each time when you call methods save() and send(), validation will fire.

You can also force form validation using the validate() method:

var formData = [{type: "input", name:"username", label: "User Name", validate: "NotEmpty"},
         	{type: "button", name: "btn", value: "validate"}];];
var myForm = new dhtmlXForm("form_container", formData);
 
myForm.attachEvent("onButtonClick", function(id) { myForm.validate(); } );

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.

There are 4 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

You can also handle HTML input-related events, such as onblur (fires when the element which is in focus, loses that focus). For mode details, read article 'Events handling', chapter 'Triggering HTML events'.

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.

var formData = [{type: "input", label: "Number", validate:"ValidEmail"}];

Custom rules can be created by defining a custom function and using its name as the validation rule. Such function takes the only parameter - the field's value and if validation is successful returns true, otherwise false.

var formData = [{type: "input", label: "Number", validate:"Greater100"}];
...
function Greater100(data){ 
        return (data>100);
}

In case, you want to validate a field just if it contains something (i.e. don't validate the field if it's empty), you should use the following technique:

var formData = [{type: "input", label: "Number", validate:"Greater100"}];
...
function Greater100(data){
        if (data=="") return true;// returns 'true' if the field is empty
 
        return (data>100);
}

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

var formData = [{type: "input", label: "Number", validate:"[0-9]+"}];