# Validator

```ts
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.

```tsx
import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { ValidationGroup, TextField, Validator, ValidationError } from "cx/widgets";

interface Model {
  password: string;
  confirmPassword: string;
  valid: boolean;
}

const m = createModel<Model>();

export default (
  <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>
);

```

## 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       |