Lattice Grid Buy a licence

demo D89

Validation: JavaScript Data Grid Demo

Refusing a value, showing why, keeping the editor open

edit.validate

This grid refuses a bad value before it reaches the row, keeps the editor open, and shows why the value was rejected. It stops silent data corruption at the point of entry, so a user learns of a problem while they can still fix it.

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    edit: true,
    columns: [
      { field: 'id', title: 'Order', layout: { width: 120, pin: 'start' } },
      {
        field: 'reference', title: 'Reference', layout: { width: 130 },
        edit: {
          enabled: true,
          validate: ({ value }) =>
            /^(CHG|INC|REQ)-\d{4}$/.test(String(value ?? ''))
              ? true
              : 'Use CHG, INC or REQ followed by four digits.',
        },
      },
      {
        field: 'circuits', title: 'Circuits', type: 'number', layout: { width: 110 },
        edit: {
          enabled: true,
          validate: ({ value }) => {
            const n = Number(value);
            if (!Number.isInteger(n)) return 'Whole circuits only.';
            return n >= 1 && n <= 40 ? true : 'Between 1 and 40.';
          },
        },
      },
      {
        field: 'budget', title: 'Budget', type: 'number', layout: { width: 140 },
        format: { style: 'currency', currency: 'GBP' }, total: 'sum',
        edit: {
          enabled: true,
          // The row is in the bag as well as the value, so a rule can be
          // about the record rather than only about what was typed.
          validate: ({ value, row }) => {
            const n = Number(value);
            if (!Number.isFinite(n) || n < 0) return 'A budget cannot be negative.';
            const circuits = Number(row?.data?.circuits ?? 0);
            return n <= circuits * 5000
              ? true
              : `At ${circuits} circuits the cap is ${(circuits * 5000).toLocaleString('en-GB')}.`;
          },
        },
      },
    ],
    rows,  // work orders
  });
</script>

Rejecting a bad value without closing the editor

Validation stops a commit before a bad value reaches the row: the editor stays open, the cell carries an error state, and the user sees why the value was refused rather than finding out later that a save silently dropped a field. A developer reaches for this on any column where the underlying type or a business rule is narrower than free text accepts: a quantity that cannot go negative, a date that cannot precede an order date in the same row, a code that must match a fixed list. Lattice Grid wires this through edit.validate, a per-column function that receives the pending value and the row and returns either nothing or a message; a message blocks the commit and keeps focus in the editor instead of letting Tab or Enter move on. Validation runs against the row already resolved for that cell, so a rule checking one field against a sibling field costs a single comparison, not a rescan of the grid. The error message is attached to the input through aria-describedby for the duration of the failure, so a screen reader reads the reason with the value rather than through a separate alert. This keeps a JavaScript data grid’s inline editing honest without a modal or a confirmation step breaking the flow of entering data.

How do I stop an invalid value from being saved in a grid cell?

Set edit.validate on the column to a function that inspects the pending value and the row, returning an error message when the value should be refused. While that message is present, the commit on Tab, Enter, or clicking away is blocked, the editor stays open, and the message is exposed to assistive technology alongside the cell so the reason is announced with the failure.

Related demos