The library provides a special extension to validate data in dhtmlxGrid on the client side (for server-side validation use the dhtmlxConnector library).
Validation can be enabled for a whole column or for a specific cell.
To validate grid's column, call the setColValidators method to assign validators to columns:
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.setColValidators("NotEmpty,ValidEmail,ValidInteger"); mygrid.init();
After these 2 steps are performed each time when the user finishes editing validation will be triggered.
Related sample: Basic validation
To set several validators to the same column, call the setColValidators as in:
mygrid.setColValidators(["ValidInteger,ValidEmail","ValidEmail"]);
//the 1st column has 2 validators assigned: "ValidInteger" and "ValidEmail"
//the 2nd column has 1 validator assigned: "ValidEmail"
If you need to define validation rules just for some columns, set an empty or 'null' value for the columns which shouldn't be affected by validation.
mygrid.setColValidators("ValidInteger,,,ValidEmail");
//or
mygrid.setColValidators(["ValidInteger",null,null,"ValidEmail"]);
To validate a grid's cell:
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true); mygrid.init();
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true); mygrid.init();
mygrid.load("data/grid.php");
mygrid.cells(mygrid.getSelectedId(),0).setAttribute("validate","NotEmpty");
Related sample: Per cell rules
If you configure the grid from XML, you can assign validators directly in the XML file:
Assigning validators directly in an XML file
<row id="11">
<cell validate="NotEmpty">some</cell>
<cell>some value</cell>
<cell>some value</cell>
</row>
To force validation for a certain cell manually use the validateCell method:
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true);
mygrid.init();
mygrid.load("data/grid.php");
mygrid.validateCell(1,1,dhtmlxValidation.isValidTime);
Related sample: Forced validation
There are 2 types of validation rules:
Standard rules are the following:
To create a custom rule define a new method for the dhtmlxValidation object and use the name of that method as the name of the rule.
Note,
dhtmlxValidation.isMin4=function(data){ // data should include more than 4 symbols return data.length>=4;};dhtmlxValidation.isMax10=function(data){// data should include less than 10 symbols return data.length<=10;};mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setColValidators("Min4,Max10"); mygrid.init();
In case you want to validate a cell just if it contains something (i.e. don't validate the cell if it's empty), use the following technique:
dhtmlxValidation.isGreater100=function(data){
if (data=="") return true;// returns 'true' if a cell is empty
return (data>100);
};
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.setColValidators("Greater100,,"); mygrid.init();
Validation can be used in 2 modes:
The basic mode is enabled by default and invokes validation just after the user finishes editing. In the live mode validation is executed on each keystroke (during the editing process).
To enable the live mode call the enableValidation method with two true parameters.
Enabling the live update mode
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setSkin("dhx_skyblue");
mygrid.setImagePath("./codebase/imgs/");
mygrid.setHeader("Name,Email,Age");
mygrid.enableValidation(true, true); mygrid.setColValidators("NotEmpty,ValidEmail");mygrid.init();
Related sample: Live validation
The 'validation' extension provides the following validation-related events:
mygrid.attachEvent("onValidationCorrect",function(id,ind,value){
mygrid.setCellTextStyle(id,ind,"");
document.getElementById('message').innerHTML="";
return false;
});
Related sample: Basic custom validation
mygrid.attachEvent("onLiveValidationError",function(id,ind,value){
document.getElementById('message').innerHTML="Error at cell ("+id+","+ind
+"), value must "+(ind==0?"not be empty":"be a valid email");
return false;
});
mygrid.attachEvent("onLiveValidationCorrect",function(id,ind,value){
document.getElementById('message').innerHTML="";
return false;
});
Related sample: Live custom validation
You can also use the onCellChanged and onEditCell events for validation purposes. Note, while using these events you don't need to include the source file of the 'validation' extension on your page.
Using common dhtmlxGrid events for validation
mygrid.attachEvent("onCellChanged",function(id,index,value){
if (index == SOME && !some_check(value))
grid.cellById(id,index).setCValue("invalid");
})
//or
mygrid.attachEvent("onEditCell",function(stage,id,index,new_value,old_value){
if (stage == 2 && index == SOME && !some_check(new_value))
return false; //deny edit operation
})
When an input fails validation it's get marked with a special css class.
To set custom styling you should redefine the related css class:
<style>
.dhtmlx_validation_error{
... any custom marking rules here ...
}
</style>
The custom messages can be added by using validation events.
The native dhtmlxGrid validation described above doesn't affect DataProcessor behaviour. What does it mean?
All changes made in the grid are sent to the server, no matter if they're correct or not. Cells that fail validation are marked with a special style but their values are saved on the server.
To block sending incorrect data to the server specify the validation rules using the API of dataProcessor, particularly the setVerificator method. dataProcessor validates data before sending it to the server and prevents saving the data that failed validation.
dp.setVerificator(1,dhtmlxValidation.isValidEmail);
Read more details on dataProcessor validation here.
Back to top