Displays an invalid HTML form control element’s validation message on focus, using the standard Constraint Validation API.

When the HTML form control element is focused it’s reportValidity method is used to show it’s validationMessage in a native tooltip, if the control is invalid.

This allows users to see why form fields are invalid without having to submit the form.

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



TypeReact ref (required)

React ref for the HTML form control element.


How to import.
import useOnFocusReportValidity from "device-agnostic-ui/useOnFocusReportValidity.mjs";
A contrived usage example; normally you would use <Textbox> which has this built-in.
import useOnFocusReportValidity from "device-agnostic-ui/useOnFocusReportValidity.mjs";
import React from "react";

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


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

const result = <Input type="email" />;