Data Validation in a JavaScript Data Grid

Data validation is an important task for any applications that accept user input. In build 212, we added data validation to the CollectionView class, which can be used by all Wijmo controls that support data collections, including our JavaScript DataGrid, FlexGrid.

View the Data Validation sample

HTML5 has good support for forms validation. Wijmo leverages that support and extends it with custom pseudo-classes and validation directives. For details on Wijmo form validation, please see the following articles:

• Building Great Web Forms with Wijmo
• Easy Form Validation in AngularJS

How to Implement Data Validation in FlexGrid

To add validation support to a CollectionView, set the new getError property to a callback function that takes a data item and a property name as parameters, and returns a string with an error description (or null if there are no errors).

For example:

var view = new wijmo.collections.CollectionView(data, {  
 getError: function (item, property) {  
  switch (property) {  
   case 'country':  
    return countries.indexOf(item.country) < 0  
     ? 'Invalid Country'  
     : null;  
   case 'downloads':  
   case 'sales':  
   case 'expenses':  
    return item[property] < 0  
     ? 'Cannot be negative!'  
     : null;  
   case 'active':  
    return item.active && item.country.match(/US|UK/)  
     ? 'Active items not allowed in the US or UK!'  
     : null;  
  }  
  return null; // no errors detected  
 }  
});  

Once you define the getError callback on a CollectionView, any control bound to the collection may use it to validate items being loaded or edited.

For example, Wijmo's JavaScript DataGrid will use the validation logic in the data source to:

• Automatically highlight errors by adding the ‘wj-state-invalid’ pseudo-class to row headers and to any cells that contain errors, and
• Prevent users from entering invalid data into cells when editing.

The image below shows a FlexGrid bound to some data that contains validation errors:

Data validation in FlexGrid

The appearance of the cells that contains errors is defined in CSS and is easily customizable.

Validation is also applied while editing the grid. If a user tried to enter an invalid country, for example, the grid would apply the error style to the cell and would keep it in edit mode until the user selected a valid country or pressed the Escape key to cancel the edits.

This default behavior can be disabled by setting the grid’s validateEdits property to false.

This simple mechanism makes it easy to identify and prevent errors in the grid data and provides a consistent look and feel for grid validation.

View the Data Validation sample