ValidationError

import { ValidationError } from 'cx/widgets';

The ValidationError widget displays the validation error message from the nearest Validator in the component tree. It renders as a <label> element linked to the invalid field, allowing users to click on the error to focus the field.

 <LabelsTopLayout vertical>
  <DateField label="Start Date" value={m.startDate} required />
  <DateField label="End Date" value={m.endDate} required />
  <Validator
    value={{ start: m.startDate, end: m.endDate }}
    onValidate={(value) => {
      if (value.start && value.end && value.start > value.end)
        return "End date must be after start date"
    }}
    visited
  >
    <ValidationError class="block mt-2 px-3 py-2 bg-red-100 text-red-600 rounded text-sm" />
  </Validator>
</LabelsTopLayout> 
 interface Model {
  startDate: string;
  endDate: string;
}

const m = createModel<Model>(); 
 import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { DateField, Validator, ValidationError } from "cx/widgets"; 

Start Date

End Date

Configuration

Properties

Property	Type	Description
`class`	`string`	CSS class names to apply to the error label
`style`	`object`	Inline styles to apply to the error label