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

A contrived usage example; normally you would use <Textbox> which has a validationMessage prop.
import { useCustomValidity } from 'device-agnostic-ui'
import React from 'react'

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

  useCustomValidity(ref, validationMessage)

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

<Input
  type="email"
  validationMessage="Email address already registered."
/>