useCustomValidity

Sets a custom validation message on a HTML form control element using the standard Constraint Validation API.

It uses the HTML form control element’s setCustomValidity method to set a custom validationMessage that displays a native tooltip and activates the CSS :invalid pseudo-class.

Useful when making form control components from scratch; it’s used by many of the form components.

Parameters

ref

TypeReact ref (required)

React ref for the HTML form control element.

validationMessage

TypeString (optional)
Default""

Validation message for the HTML form control element. An empty string means valid.

Examples

How to import.
import useCustomValidity from "device-agnostic-ui/useCustomValidity.mjs";
A contrived usage example; normally you would use <Textbox> which has a validationMessage prop.
import useCustomValidity from "device-agnostic-ui/useCustomValidity.mjs";
import React from "react";

const Input = ({ validationMessage, ...props }) => {
  const ref = React.useRef();

  useCustomValidity(ref, validationMessage);

  return <input {...props} ref={ref} />;
};

const result = (
  <Input type="email" validationMessage="Email address already registered." />
);