Tutorial: Data validation

Data validation

Edit this page

Use the validator (see options page) method to easily validate synchronous or asynchronous changes to a cell. If you need more control, beforeValidate and afterValidate plugin hooks are available (see hooks page). In the below example, email_validator_fn is an async validator that resolves after 1000 ms.

Use the allowInvalid option (see options page) to define if the grid should accept input that does not validate. If you need to modify the input (e.g. censor bad words, uppercase first letter), use the plugin hook beforeChange (see hooks page).

By default all invalid cells are marked by htInvalid CSS class. If you want to change class to another you can basically add the invalidCellClassName option to Handsontable settings. For example:

// For whole table
invalidCellClassName: 'myInvalidClass',

// For specified columns
columns: [
{data: 'firstName', invalidCellClassName: 'myInvalidClass'},
{data: 'lastName', invalidCellClassName: 'myInvalidSecondClass'},
{data: 'address'},

Callback console: [[row, col, oldValue, newValue], ...]

Edit the above grid to see callback