Data Validation in React Data Grid

The Syncfusion® React Data Grid component ensures accurate data entry through validation features that enforce rules such as required fields, valid formats, and value ranges. Support for both built-in and custom validation logic allows dynamic conditions, complemented by clear error messaging for a seamless experience.

Why validation matters?

Validation ensure reliable data during operations such as adding, editing, or saving. Built-in rules, such as required fields, and custom validation logic prevent invalid input. Dynamic conditions and clear error messages enhance usability and maintain application integrity, supporting flexible and accurate data entry in the grid. The available key features include

Column Validation: Apply rules like required or number formats per field.
Custom Validation: Use functions for advanced, rule-based logic.
Dynamic Validation: Adjust rules based on values in other columns.

Built-in validation rules

Data Grid component includes built-in validation rules for enforcing data accuracy. The following table provides descriptions, usage examples, and valid inputs for these rules.

Rule	Description	Example
`required`	The input must not be empty.	`required: [true, 'Field is required']` Valid: "a", "1", "-"
`email`	Must be in valid email format.	`email: [true, 'Invalid email']` Valid: form@example.com
`url`	Must be in valid URL format.	`url: [true, 'Invalid URL']` Valid: https://syncfusion.com/
`date`	Must be a valid date format.	`date: [true, 'Invalid date']` Valid: `"05/15/2017"`
`dateIso`	Must be valid ISO date format (YYYY-MM-DD).	`dateIso: [true, 'Invalid ISO date']` Valid: "2017-05-15"
`number`	Must be a valid number.	`number: [true, 'Not a number']` Valid: "1.0", "1"
`digits`	Must contain only digits.	`digits: [true, 'Digits only']` Valid: "1" (Invalid: "1a")
`maxLength`	Input length must be ≤ max.	`maxLength: [5, 'Too long']` Valid: "check" (Invalid: "checking")
`minLength`	Input length must be ≥ min.	`minLength: [5, 'Too short']` Valid: "testing" (Invalid: "test")
`rangeLength`	Input length must be within range.	`rangeLength: [[4, 5], 'Invalid length']` Valid: "test" (Invalid: "key")
`range`	Number must be within range.	`range: [[4, 5], 'Out of range']` Valid: "4" (Invalid: "6")
`max`	Number must be ≤ max.	`max: [3, 'Value too high']` Valid: "3" (Invalid: "4")
`min`	Number must be ≥ min.	`min: [4, 'Value too low']` Valid: "5" (Invalid: "2")
`regex`	Must match regex pattern.	`regex: [/^[A-z]+$/, 'Letters only']` Valid: "a" (Invalid: "1")
`creditCard`	Must be valid credit card format.	`creditCard: [true, 'Invalid card']` Valid: "4111111111111111"
`tel`	Must be valid telephone number.	`tel: [true, 'Invalid phone']` Valid: "+12345678901"
`equalTo`	Must match value of another field.	`equalTo: ['password', 'Passwords must match']` Valid: Used for confirmation fields

Column validation

Use validationRules property to define input constraints like required, number, minLength, min, and max. For example, enforce numeric input for the "Order ID" column, minimum character length for the "Customer ID" column, and value range for the "Freight" column. The grid displays error messages automatically for invalid entries.

Custom validation

Data Grid component supports custom validation through a custom function to enforce specific rules, such as ensuring the "Customer ID" starts with "ID-" followed by at least three characters (e.g., ID-XYZ). The minLength rule is used to ensure a minimum of six characters. If validation fails, a custom error message is displayed in the .sf-error element, a built-in class for showing validation errors.

Phone number validation

Phone number validation enforces a consistent format for mobile numbers, typically including a country code. This validation improves data accuracy and uniformity, especially in user profile forms, contact directories, or any grid that captures communication details.

const phoneRules = {
  required: true,
  tel: [true, 'Invalid phone']
};

<Column field='PhoneNumber' headerText='Phone Number' validationRules={phoneRules} width='150' />

const phoneRules = {
  required: true,
  tel: [true, 'Invalid phone']
};

<Column field='PhoneNumber' headerText='Phone Number' validationRules={phoneRules} width='150' />

Email validation

Email validation ensures that entered email addresses follow correct syntax rules. This process helps prevent invalid entries that could interfere with communication, authentication, or data integrity.

const emailRules = {
  required: true,
  email: [true, 'Enter a valid email address']
};

<Column field='Email' headerText='Email' validationRules={emailRules} width='200' />

const emailRules = {
  required: true,
  email: [true, 'Enter a valid email address']
};

<Column field='Email' headerText='Email' validationRules={emailRules} width='200' />

Credit card validation

Credit card validation ensures that input matches the expected format of a valid card number. This process helps verify the structural integrity of the card number before further processing.

const creditCardRules = {
  required: true,
  creditCard: [true, 'Invalid card']
};

<Column field='CardNumber' headerText='Credit Card' validationRules={creditCardRules} width='180' />

const creditCardRules = {
  required: true,
  creditCard: [true, 'Invalid card']
};

<Column field='CardNumber' headerText='Credit Card' validationRules={creditCardRules} width='180' />

The following example demonstrates how built-in and custom validation can be applied during form-based editing. This approach ensures that data entered into the grid meets predefined rules and constraints, enhancing data integrity and experience.