Version 6.3 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

Data Validation

Overview

Validators are used to ensure that any user input into your editable cells matches your requirements.

Validators can be applied by using the validator property in a columns definition object (see Define Columns for more details). 

{title:"Rating", field:"rating", editor:"input", validator:"required"}

When using validators that take properties you can pass in an object:

{title:"Rating", field:"rating", editor:"input", validator:{
	type:"max",
	parameters:5,
}}

Or you can use the shorthand notation, separating the type and parameter with a : symbol:

{title:"Rating", field:"rating", editor:"input", validator:"max:5"}

Validator Functions

Built In Validators

Tabulator has a wide variety of built in validators:

  • required - value cannot be null or an empty string
  • unique - no other row in the column can have this value
  • integer - value must be an integer
  • float - value must be a float
  • numeric - value must be a number
  • string - value must be a non-numeric string
  • min - value must be greater than or equal to parameter
     {validator:"min:5"} \\value must be greater than or equal to 5
  • max - value must be less than or equal to parameter
     {validator:"max:5"} \\value must be less than or equal to 5
  • minLength - string value must have a length greater than or equal to parameter
     {validator:"minLength:5"} \\value must have a length greater than or equal to 5
  • maxLength - string value must have a length less than or equal to parameter
     {validator:"maxLength:5"} \\value must have a length less than or equal to 5
  • in - value must be an empty string or match a value from the | delimited string in the parameter
     {validator:"in:red|green|blue"} \\value must be 'red', 'green' or 'blue'
  • regex - value must match supplied regex 
     {validator:"regex:\\.com$"} \\allow strings that end in '.com'

If the validation fails the tabulator-validation-fail class will be applied to the cell and the validationFailed callback will be triggered. The user will not be able to leave the cell until they input a valid value or cancel the edit (press escape).

Note By default all validators, except the required validator will approve any empty value (ie. empty string, null or undefined). to ensure empty values are rejected you should use the required validator.

Custom Validator Functions

If you want to add your own custom validation functions, you can pass a function to the validator property. It should return true if the value passes validation and false if it fails:

//validator to prevent values divisible by the provided divisor
var noDivide = function(cell, value, parameters){
	//cell - the cell component for the edited cell
	//value - the new input value of the cell
	//parameters - the parameters passed in with the validator

	return value % parameters.divisor; //don't allow values divisible by divisor ;
}

//in your column definition for the column
{title:"Age", field:"age", editor:"input", validator:[
	{
		type:noDivide,
		parameters:{
			divisor:5,
		}
	}
]}

Applying Multiple Validators

You can use multiple validators on the same column by passing an array to the validator property

{title:"Rating", field:"rating", editor:"input", validator:["required", "max:5"]}

Callbacks

A range of callbacks are available for validation. See the Validation Callbacks section for more information.

Donate