Repository navigation
Advanced Validation: Runtime Error Injection (Optional) #337
Description
Advanced Validation: Runtime Error Injection
validationMessages (static map) is already implemented as Option B and ships today.
The open question is whether to also implement Option A: Event-Driven (ag-validate event) for dynamic/server-side validation scenarios where static message maps aren't enough.
Option A summary: Component fires ag-validate when validity changes. Consumer handles the event and can overwrite event.detail.message with any string before the component calls setValidity.
| Option A (Event-Driven) | Option B (Validation Map) | |
|---|---|---|
| Status | Proposed | ✅ Implemented |
| Use case | Dynamic / server-side errors | Static i18n message overrides |
| Framework support | All frameworks + plain HTML | All frameworks + plain HTML |
| API surface | New event contract | validationMessages prop |
| Async support | ✗ Synchronous only | ✗ Synchronous only |
| Tradeoff | Fires on every input; event.detail mutation is unfamiliar |
Limited to pre-known validity flag names |
Decision needed: Is Option A worth the added complexity, or do we wait until there's a concrete consumer use case driving it?
Option A implementation sketch
See v2/lib/src/components/FACE-NOTES.md for the full spec. Core idea:
const validateEvent = new CustomEvent("ag-validate", {
bubbles: true, composed: true, cancelable: false,
detail: {
validity: el.validity,
nativeMessage: el.validationMessage,
message: el.validationMessage, // consumer overwrites this
},
});
this.dispatchEvent(validateEvent);
const customMessage = validateEvent.detail.message ?? el.validationMessage;
this._internals.setValidity(el.validity, customMessage, el);
Activity