@hypothesis/frontend-shared/lib/hooks/use-validate-on-submit.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * Return a form "submit" event handler that validates the form using
 * {@link HTMLFormElement.checkValidity}.
 *
 * If the check passes, `onValid` is invoked. Otherwise the first control in
 * {@link HTMLFormElement.elements} with an error is focused. This will allow
 * the user to correct the error, and also cause screen readers to announce
 * the current validation state and errors.
 *
 * This hook is useful for forms which want to display a custom presentation
 * of validation errors. Forms using the browser's built-in validation error
 * display do not need to use this.
 *
 * To show custom validation errors, the consumer should:
 *
 * - Ensure that all input controls validate their input on "change" events.
 * - Ensure that validation errors are displayed for each control.  The input
 *   fields must link their validation errors using `aria-describedby` and
 *   indicate their state using `aria-invalid`.
 * - Set the `noValidate` property on the `<form>` to disable the native
 *   validation UI message
 * - Call this hook to create a "submit" event handler and pass it to
 *   the form's `submit` prop.
 *
 * See also https://react-spectrum.adobe.com/react-aria/forms.html.
 */
export declare function useValidateOnSubmit(onValid: () => void): (e: SubmitEvent) => void;