field validation
Declarative per-cause errors below the field. No browser bubbles.
Example
Basic usage
<m-field>
<label for="email">Email</label>
<input id="email" type="email" required />
<m-error match="value-missing">Email is required.</m-error>
<m-error match="type-mismatch">Not a valid email.</m-error>
<m-error></m-error> <!-- catch-all: browser's own message -->
</m-field>
<script type="module" src="mica/field.js"></script>API
m-field groups one native field with declarative m-error messages. Native constraints remain the source of validity.
Mica-specific attributes
| Name | Type | Default | Description |
|---|---|---|---|
match | validity cause | catch-all | On m-error, matches value-missing, type-mismatch, pattern-mismatch, too-long, too-short, range-underflow, range-overflow, step-mismatch, bad-input, or custom-error. |
Content/markup contracts
| Content | Contract | Default | Description |
|---|---|---|---|
| Field | one input, textarea, or select | — | The first matching descendant is validated and wired to the active error. |
m-error | one or more messages | hidden | The first matching error is activated; a matchless error is the fallback. An empty fallback receives the browser's validation message. |
field.js
Optional. Suppresses native validation bubbles while preserving blocked submission, focuses the first invalid field, activates the first applicable error, and wires aria-invalid and aria-describedby. Once shown, an error revalidates on input and clears when fixed.
Without the module, a matchless m-error still shows through :user-invalid and submits fall back to native bubbles. Working markup, enhanced — never rendered.
<script type="module" src="mica/field.js"></script>