How to validate data with DHTMLX Touch?

In this article we'll tell you about validation: how to use predefined rules and create own, how to implement data checking and etc.

First of all, important notice - data validation can be applied to dataProcessor objects and also made directly in form.
It's realized by means of the parameter 'rules'.

  • rules - hash code of the rules (functions) for validated fields.
    It has the following structure:
    rules:[{ control_id:rule}]

where,

  • control_id - the identification name of the control (the value of the parameter id).
  • rule - the appropriate rule for the defined control (can be both a predefined rule or a custom function )
dhx.ui({ 
        rows:[{
             view:"form", 
             id:"topForm", 
             data:[ 
                   { type:"text", id: "fullname", label: 'Full name' },
                   { type:"text", id: "birth", label: 'Date of birth' },
                   { type:"button", id: "save", label:"Submit" }],
             rules:[
                   { fullname:dhx.rules.isNotEmpty}, // the predefined rule 'isNotEmpty'
                   { age:isBirthFormat}] // the custom function 'isBirthFormat'
	     }]
        ...
});

Predefined Rules

As it was mentioned above, you can use predefined rules. There are 2 such rules:

  • isNotNumber - checks whether a value is empty
  • isNumber - checks whether a value is number

In rules parameter you must refer to them as: dhx.rules.isNotEmpty and dhx.rules.isNumber

Custom rule

If you need, you can use any custom function as a rule. Such function will take 3 parameters (btw, value=obj[key]):

  • value - the validated value
  • obj - the validated data object
  • key - the id of the validated field

For a example, the checking whether a value is positive integer.

isPositiveInteger = function(value) {
	return (parseInt(value,10) == value && value>=0);
}
 
var dp = new dhx.DataProcessor({
   ...
   rules:{
	age:isInteger
   }
});

Special validation keys: $all and $obj

Here you'll know about extra keys which can simplify your work when you need to validate the whole data object or all set of data.

  • $all - allows to apply some rule to each property of data object
dhx.ready(function(){
    dhx.ui({
	view:"grid",
	fields:[{
		  id:"Name",
		  width:350,
		  label:"Full Name"
		},
		{
		  id:"Year",
		  width:200,
                  label:"Year"
	}],
	datatype:"json", url:"data.json"
     });
 
     var dp = new dhx.DataProcessor({
                      ...
                      rules:{
	                    $all:dhx.rules.isNotEmpty
                      }
     })
})
  • $obj - in this case, a rule will receive the whole data object at once

Please note, custom validation function for $obj takes the only parameter - the validated data object.

dhx.ready(function(){
    confirmPassword = function(obj) {
	return (obj.pass1 == obj.pass2);
    }
 
    dhx.ui({
        view:"form", id:"myform", data:[
            { type:"text", label:"Password", id:"pass1"},
            { type:"text", label:"Confirm password",  id:"pass2"},
            { type:"button", label:"Save", id:"save"}
    });
 
    var dp = new dhx.DataProcessor({
                ...
                rules:{
                $obj:confirmPassword
                }
    })
})