Shared form-control policy for form-associated components: ElementInternals validity + form value, and the inline error-display recipe.
The two decisions here — constraint validity and the error-describedby
token — are pure functions, separated from their effects (set-validity! /
sync! / apply-error-display!), so the policy that maps a component's
error / required / emptiness onto native validity and invalid markers
lives in one place and is unit-testable — the browser test harness cannot
exercise the ElementInternals / DOM effects, but it can test the projections.
A component supplies only its genuine per-control variation — what counts as empty, which element is the validity anchor, its value projection, any non-default missing message, and (for describedby) any author-supplied id — and composes this policy.
Shared form-control policy for form-associated components: ElementInternals validity + form value, and the inline error-display recipe. The two decisions here — constraint `validity` and the `error-describedby` token — are pure functions, separated from their effects (`set-validity!` / `sync!` / `apply-error-display!`), so the policy that maps a component's `error` / `required` / emptiness onto native validity and invalid markers lives in one place and is unit-testable — the browser test harness cannot exercise the ElementInternals / DOM effects, but it can test the projections. A component supplies only its genuine per-control variation — what counts as *empty*, which element is the validity *anchor*, its *value* projection, any non-default *missing message*, and (for describedby) any author-supplied id — and composes this policy.
(apply-error-display! el anchor error-el {:keys [error has-error?]} describedby)Effect: render a control's inline validation error and its invalid markers,
from {:error :has-error?}:
[part=error] span text and toggle its error-hidden class,data-invalid on the host el,aria-invalid on the anchor,aria-describedby on the anchor to describedby, or remove it when
describedby is nil.
describedby is passed in (see error-describedby) because the token set —
error only, or author-supplied ids plus error — is the caller's to decide.Effect: render a control's inline validation error and its invalid markers,
from `{:error :has-error?}`:
- set the `[part=error]` span text and toggle its `error-hidden` class,
- set/remove `data-invalid` on the host `el`,
- set `aria-invalid` on the `anchor`,
- set `aria-describedby` on the `anchor` to `describedby`, or remove it when
`describedby` is nil.
`describedby` is passed in (see `error-describedby`) because the token set —
error only, or author-supplied ids plus error — is the caller's to decide.(error-describedby has-error? author)Pure: the aria-describedby value for a control's interactive element — the
inline-error id when an error is present, appended after an optional
author-supplied id list. Returns nil when there is neither an error nor an
author value (the caller then removes the attribute).
Pure: the `aria-describedby` value for a control's interactive element — the inline-error id when an error is present, appended after an optional author-supplied id list. Returns nil when there is neither an error nor an author value (the caller then removes the attribute).
(set-validity! internals anchor inputs)Effect: apply the standard validity projection to internals, anchored at
anchor. No-op when internals is nil (older browsers / attachInternals
absent). inputs is the map accepted by validity.
Effect: apply the standard `validity` projection to `internals`, anchored at `anchor`. No-op when `internals` is nil (older browsers / attachInternals absent). `inputs` is the map accepted by `validity`.
(sync! internals anchor value inputs)Effect: push value into the form and apply the standard validity in one
call. No-op when internals is nil. inputs is the map accepted by
validity.
Effect: push `value` into the form and apply the standard validity in one call. No-op when `internals` is nil. `inputs` is the map accepted by `validity`.
(validity {:keys [has-error? error required? empty? missing-message]})Pure: the standard BareDOM constraint-validation projection.
Returns a map {:flags <#js validity-state> :message <string>} ready for
ElementInternals.setValidity. Precedence: a present error wins as a
customError; otherwise a required? control that is empty? reports
valueMissing; otherwise the field is valid (empty flags + empty message).
Pure: the standard BareDOM constraint-validation projection.
Returns a map `{:flags <#js validity-state> :message <string>}` ready for
`ElementInternals.setValidity`. Precedence: a present `error` wins as a
`customError`; otherwise a `required?` control that is `empty?` reports
`valueMissing`; otherwise the field is valid (empty flags + empty message).cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |