[ @sdxc/ui/mixins ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

Usage

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

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

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

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

Event

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.

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

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

Constant

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.

const FIELD_ERROR_ATTRIBUTE = "data-field-error"

Type

ValidatableField

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

type ValidatableField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement