React Data GridCell Editing Validation

Standard Validation Copy Link

The Grid provides built-in validation for all Provided Cell Editors, such as the Text, Large Text, Number and Date editors. These editors support validation automatically by checking the constraints defined in the column configuration. For example:

• Text and Large Text editors will respect the maxLength property.
• Number editors validate against min and max constraints.
• Date editors ensure the value is a valid date string.

Validation is performed when editing ends, and the Grid will handle invalid values based on the selected Validation Modes.

Overriding Validation Copy Link

To add custom validation logic to a Provided Editor, use the getValidationErrors() callback inside the ICellEditorParams. This allows you to define additional rules that are specific to your application.

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'athlete',
        cellEditorParams: {
            getValidationErrors: (params) => {
                const { value } = params;
                if (!value || value.length < 3) {
                    return ['The value has to be at least 3 characters long.'];
                }

                return null;
            },
        },
    },
]);

<AgGridReact columnDefs={columnDefs} />

If the callback returns errors, the Grid will show the errors in a tooltip when hovering the editor and discard the edit value before completing (depending on the Validation Modes).

This is demonstrated in the following example, note that:

• Athlete has to be longer than 3 characters.
• Age has to be different than 18.

Validation Modes Copy Link

The Grid supports two modes for handling invalid edits, configured via the grid option invalidEditValueMode:

Use the 'block' mode when you want to strictly enforce valid input before allowing the user to proceed.

const invalidEditValueMode = 'block';

<AgGridReact invalidEditValueMode={invalidEditValueMode} />

Full Row Editing Validation Copy Link

When using Full Row Editing, the Grid will validate each cell editor in the row individually, using the same mechanisms described in the previous sections.

In addition, the Grid can also perform cross-field validation by using the optional callback getFullRowEditValidationErrors(params). This allows you to implement logic that checks relationships between fields — for example, ensuring that one field is greater than another.

This callback should return an array of error strings if the row is in an invalid state. If no errors are found, it should return null.

const getFullRowEditValidationErrors = (params) => {
    const { data } = params;
    if (data.min > data.max) {
        return ['Min cannot be greater than Max'];
    }
    return null;
};

<AgGridReact getFullRowEditValidationErrors={getFullRowEditValidationErrors} />

A row edit will only complete successfully if both the individual cell editors and the full-row validation return no errors.

This is demonstrated in the following example. Note the following validation rules:

• Weight has to be a positive value below 500.
• Height has to be a positive value below 300.
• Full Row Edit Validation ensures that the Body Mass Index (BMI), calculated using height and weight, is between 10 and 80.

Validation of Custom Editors Copy Link

Custom Cell Editors can participate in the Grid's validation system by optionally implementing the following methods:

These methods are called automatically before the Grid attempts to complete the edit. You can also manually trigger validation by calling the validate() method available in the cellEditorParams, for example:

cellEditorParams.validate();

This is useful if you want to validate input during editing, such as in response to an onInput event.