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:
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:
Standard rules are the next:
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]+"}];