# validate

> Applies a shared `remix/data-schema` field schema to a native form control's current value, layering the verdict onto the field's Constraint Validation API state via `setCustomValidity()` and mirroring it into the field's `FieldError` slot once the browser flags it invalid, since no HTML constraint attribute expresses a schema-shaped check on its own.

```ts
import { validate } from "@sdxc/ui/mixins";
```

Adds schema-driven client validation to a form field: `input` keeps its
Constraint Validation state current via `setCustomValidity()`, and once
reported invalid, mirrors the message into the FieldError slot instead of the native bubble, dispatching ValidateChangeEvent on change.

## Signature

```ts
validate(schema: Schema<unknown, unknown>): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `schema` | `Schema<unknown, unknown>` | Schema checked against the field's raw string value — typically the same schema the server parses the submitted form with. |

## Examples

```tsx
import * as s from "remix/data-schema";
import * as checks from "remix/data-schema/checks";

let EmailSchema = s.string().pipe(checks.minLength(1), checks.email());
<input name="email" type="email" required aria-describedby="email-error" mix={[validate(EmailSchema)]} />
<p id="email-error" data-field-error hidden />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### ValidateChangeEvent

Dispatched on a field by validate whenever running its schema
changes whether the field is valid, so a consumer can react — disabling a
submit button, a live-region announcement — without polling `validity`.

#### Signature

```ts
new ValidateChangeEvent(init: { valid: boolean; message: string })
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `valid` | `readonly boolean` | `true` once the field's current value satisfies the schema and every other constraint. |
| `message` | `readonly string` | The message now sitting in `validationMessage`, empty once `valid` is `true`. |

### FIELD_ERROR_ATTRIBUTE

Attribute the FieldError slot exposes itself on. Since `aria-describedby`
may list a Description alongside a FieldError, validate walks
those ids and mirrors the verdict into the first one carrying this attribute.

#### Signature

```ts
const FIELD_ERROR_ATTRIBUTE = "data-field-error"
```

### ValidatableField

Native form control types that implement the Constraint Validation API —
`setCustomValidity()`, `validationMessage`, and the `invalid` event —
validate lays a schema's verdict onto.

#### Signature

```ts
type ValidatableField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
```