Function useFormValidation

packages/react-aria/src/form/useFormValidation.ts:28–132

(
  props: FormValidationProps<T>,
  state: FormValidationState,
  ref: RefObject<ValidatableElement | null> | undefined
)

}

export function useFormValidation<T>(
  props: FormValidationProps<T>,
  state: FormValidationState,
  ref: RefObject<ValidatableElement | null> | undefined
): void {
  let {validationBehavior, focus} = props;

  // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
  useLayoutEffect(() => {
    if (
      validationBehavior === 'native' &&
      ref?.current &&
      'setCustomValidity' in ref.current &&
      !ref.current.disabled
    ) {
      let errorMessage = state.realtimeValidation.isInvalid
        ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.'
        : '';
      ref.current.setCustomValidity(errorMessage);

      // Prevent default tooltip for validation message.
      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
      if (!ref.current.hasAttribute('title')) {
        ref.current.title = '';
      }

      if (!state.realtimeValidation.isInvalid) {
        state.updateValidation(getNativeValidity(ref.current));
      }
    }
  });

  let isIgnoredReset = useRef(false);
  let onReset = useEffectEvent(() => {
    if (!isIgnoredReset.current) {
      state.resetValidation();
    }
  });

  let onInvalid = useEffectEvent((e: Event) => {
    // Only commit validation if we are not already displaying one.
    // This avoids clearing server errors that the user didn't actually fix.
    if (!state.displayValidation.isInvalid) {
      state.commitValidation();
    }

    // Auto focus the first invalid input in a form, unless the error already had its default prevented.
    let form = ref?.current?.form;
    if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {
      if (focus) {
        focus();
      } else {
        ref.current?.focus();
      }

      // Always show focus ring.
      setInteractionModality('keyboard');
    }