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:[{ control_id:rule}]
where,
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' }] ... });
As it was mentioned above, you can use predefined rules. There are 2 such rules:
In rules parameter you must refer to them as: dhx.rules.isNotEmpty and dhx.rules.isNumber
If you need, you can use any custom function as a rule. Such function will take 3 parameters (btw, value=obj[key]):
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 } });
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.
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 } }) })
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 } }) })