DEV Community

Cover image for SolidJS use:validation directive
Sylvain Dethier
Sylvain Dethier

Posted on

SolidJS use:validation directive

TL;DR: the code

SolidJS use:validation directive

Validator function

Both customValidity and validation directives must / can be used with custom validator(s).

A validator is a sync or async function that takes an HTMLElement that implements the Constraint Validation API and returns an (i18n) error validation message or an empty string when valid.

Refered here as HTMLElement_Validation, the element can be either a HTMLButtonElement, HTMLFieldSetElement, HTMLInputElement, HTMLOutputElement, HTMLSelectElement, or HTMLTextAreaElement.

/**
 * validator function
 * @param {HTMLElement_Validation} element The element to validate
 * @returns {string|Promise<string>} Empty string `""` when the element is valid, the i18n custom error `validationMessage` otherwise.
 */
type validator = (element: HTMLElement_Validation) => string | Promise<string>;
Enter fullscreen mode Exit fullscreen mode

Example of a sync validator that constraint an input element to have a value with a non empty string:

function hasNonEmptyValue(element: HTMLElement_Validation): string {
  const value = (element as HTMLInputElement).value.trim();
  const errored = value === "";
  return errored ? "Text must not be empty" : "";
}
Enter fullscreen mode Exit fullscreen mode

Usage of the customValidity directive

The reportValidity function is called upon the reportOn event type i.e change (default), blur, input.

In the example below, we use the directive on an input HTMLInputElement.

  • With validators only
<input use:customValidity={[validator, validator]}>
Enter fullscreen mode Exit fullscreen mode
  • With validators and event options
<input use:customValidity={[validator, validator, {
  reportOn: "change" // default
}]}>
Enter fullscreen mode Exit fullscreen mode

Usage of the validationMessage directive

This directive is useful to synchronize an element validationMessage with a Signal<string>.

A validationMessageSetter must be Type

Setter<string>
Enter fullscreen mode Exit fullscreen mode

A validationMessageOptions must be Type

{
  resetOn?: keyof HTMLElementEventMap,
  setOn?: keyof HTMLElementEventMap,
}
Enter fullscreen mode Exit fullscreen mode
  • With validationMessageSetter only
<input use:validationMessage={validationMessageSetter}>
Enter fullscreen mode Exit fullscreen mode
  • With validationMessageSetter and options
<input use:validationMessage={[validationMessageSetter, {
  resetOn?: "change", // default
  setOn?: "invalid" // default
}]}>
Enter fullscreen mode Exit fullscreen mode

Usage of the validation directive

This directive is the combination of the customValidty and validationMessage directive.

A validationOptions must be Type

{
  resetOn?: keyof HTMLElementEventMap,
  setOn?: keyof HTMLElementEventMap,
  reportOn?: keyof HTMLElementEventMap,
}
Enter fullscreen mode Exit fullscreen mode
  • With validationMessageSetter only
<input use:validation={validationMessageSetter}>
Enter fullscreen mode Exit fullscreen mode
  • With validationMessageSetter and options
<input use:validation={[validationMessageSetter, {
  resetOn?: "change", // default
  setOn?: "invalid", // default
}]}>
Enter fullscreen mode Exit fullscreen mode
  • With validationMessageSetter, validators and options
<input use:validation={[validationMessageSetter, [validator, validator], {
  resetOn?: "change", // default
  setOn?: "invalid", // default
  reportOn?: "change", // default
}]}>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)