Validator

import { Validator } from 'cx/widgets';

The Validator widget performs custom validation on computed or combined values. Use it when validation depends on multiple fields or requires complex logic that can’t be expressed with simple field-level validation.

The Validator only renders its children when visited is true and there is a validation error. Set visited explicitly on the Validator or use a parent ValidationGroup to control when errors are displayed.

 <ValidationGroup valid={m.valid} visited>
  <LabelsTopLayout vertical>
    <TextField
      label="Password"
      value={m.password}
      inputType="password"
      required
    />
    <TextField
      label="Confirm Password"
      value={m.confirmPassword}
      inputType="password"
      required
    />
    <Validator
      value={{ password: m.password, confirmPassword: m.confirmPassword }}
      onValidate={(value) => {
        if (value.password !== value.confirmPassword)
          return "Passwords do not match"
      }}
    >
      <div class="mt-2">
        <ValidationError class="px-3 py-2 bg-red-100 text-red-600 rounded" />
      </div>
    </Validator>
  </LabelsTopLayout>
</ValidationGroup> 
 interface Model {
  password: string;
  confirmPassword: string;
  valid: boolean;
}

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

Password

Confirm Password

Configuration

Properties

Property	Type	Description
`value`	`any`	Value to validate. Can be a binding, expression, or structured object
`visited`	`boolean`	Controls whether children are rendered when there’s an error. Inherited from parent `ValidationGroup` if not set

Callbacks

Property	Type	Description
`onValidate`	`function`	`(value, instance, validationParams) => string\|false` - Return error message or `false`
`onValidationException`	`function`	`(error, instance) => void` - Called if validation throws an error