useOnFocusReportValidity

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.

Parameters

ref

TypeReact ref (required)

React ref for the HTML form control element.

Examples

A contrived usage example; normally you would use <Textbox> which has this built-in.
import { useOnFocusReportValidity } from 'device-agnostic-ui'
import React from 'react'

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

  useOnFocusReportValidity(ref)

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

<Input type="email" />