Validate user data input

Note

This plugin can prevent users from entering data that does not meet specified validation criteria.

For more advanced validation requirements, you can use a custom plugin that intercepts user edits and maintains a cache of invalid cells. This approach allows for dynamic validation rules that can be applied at runtime.

With the CellValidatePlugin, you can enforce validation rules when data is entered into the grid.

For instance, you could define validation rules directly in your column definitions:

// Define columns
const columns: ColumnRegular[] = [
  {
    name: '💰 Price',
    prop: 'price',
    validate: (value: number) => {
      // Highlight prices outside the range of 10 and 20 but don't apply values
      return value >= 10 && value <= 20;
    }
  },
];

Cross-Column Validation

The validation function also receives the full row model as a second parameter, allowing you to validate a cell against values in other columns:

const columns: ColumnRegular[] = [
  {
    name: 'LCS Fee',
    prop: 'lcsFee',
    validate: (value: any, model?: any) => {
      // ✅ Now you can access other column values!
      if (model?.expired) return false; // Prevent fee setting for expired services
      return value != null && value !== '' && !isNaN(value);
    }
  },
  {
    name: 'Expired',
    prop: 'expired',
    // ... other column properties
  }
];

Example

In this example, the validate function checks that the price falls within the range of 10 to 20. If the entered value does not meet these criteria, the cell will be marked as invalid, similar to the first approach.

Cross-Column Validation Example

This example demonstrates how validation functions can access the full row model, allowing for cross-column validation logic. Try editing the “LCS Fee” column for rows where “Expired” is “Yes” - the validation will prevent you from setting a fee for expired services.

Source code

src/components/cell-validate/example3.ts

import { currentTheme } from '../composables/useRandomData';
import type { ColumnRegular } from '@revolist/revogrid';
import { ColumnStretchPlugin, TooltipPlugin, validationRenderer, CellValidatePlugin, EventManagerPlugin } from '@revolist/revogrid-pro';

const { isDark } = currentTheme();

// Create sample data with an 'expired' field
const createSampleData = () => {
  const data = [];
  for (let i = 0; i < 10; i++) {
    data.push({
      id: i + 1,
      name: `Service ${i + 1}`,
      lcsFee: Math.floor(Math.random() * 1000) + 100,
      expired: Math.random() > 0.5, // Randomly set expired to true/false
    });
  }
  return data;
};

// Define columns with validation that uses the full row model
const columns: ColumnRegular[] = [
  {
    name: 'ID',
    prop: 'id',
    size: 80,
  },
  {
    name: 'Service Name',
    prop: 'name',
    size: 200,
  },
  {
    name: 'LCS Fee',
    prop: 'lcsFee',
    size: 150,
    ...validationRenderer(),
    validationTooltip: (value: any, model?: any) => {
      if (model?.expired) {
        return 'Cannot set fee for expired services';
      }
      if (value == null || value === '' || isNaN(value)) {
        return 'Fee must be a valid number';
      }
      return undefined;
    },
    validate: (value: any, model?: any) => {
      // ✅ Now we can access model.expired!
      if (model?.expired) return false;
      return value != null && value !== '' && !isNaN(value);
    }
  },
  {
    name: 'Expired',
    prop: 'expired',
    size: 100,
    cellTemplate: (h, { value }) => h('span', {
      style: { color: value ? 'red' : 'green' }
    }, value ? 'Yes' : 'No'),
  },
];

const grid = document.querySelector<HTMLRevoGridElement>('.cell-validate-3 revo-grid');
if (grid) {
  grid.source = createSampleData();
  grid.columns = columns;
  grid.additionalData = {
    stretch: 'all',
    eventManager: {
      applyEventsToSource: true,
    }
  };
  grid.plugins = [ColumnStretchPlugin, TooltipPlugin, EventManagerPlugin, CellValidatePlugin];
  grid.theme = isDark() ? 'darkCompact' : 'compact';
}

Combining Validation with Additional Properties

The CellValidatePlugin also allows you to define additional properties in your grid columns, which can be validated using the same rules you apply in your plugin. This provides flexibility in how you manage and enforce validation across your grid.

Conclusion

Cell validation in RevoGrid can be implemented in various ways to ensure data integrity and provide users with a smooth experience. Whether you choose to use simple cell properties for basic validation or develop a custom plugin for more complex scenarios, RevoGrid offers the tools you need to validate data effectively.

By applying these validation techniques, you can create a robust data grid that not only captures user input but also enforces data quality standards.