For email inputs, how to avoid the warning "Please include an @ ..." to show up right away?

[binarykitchen]

For this email address input, I only typed m and that warning already comes up right away which is quite annoying.

I'm using react-hook-form while shouldUseNativeValidation is set to true and the mode is set to onChange.

And the React-based markup is

<input
  autoFocus={true}
  autoComplete="on"
  placeholder={emailInputPlaceholder}
  required={true}
  spellCheck={false}
  type="email"
  {...register("email", {
    required: true,
  })}
/>

It's all legit. When you go to Mozilla, this doesn't happen there:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email

I understand, it's about the mode. Default is onSubmit. Then this doesn't happen.
But for some other form inputs, like changing and confirming passwords, I'd like to stick to onChange.

Would it be possible to define this mode by input base instead of form?

[BrendanC23]

You can't currently change the validation mode on a per-field basis in react-hook-form (see #13085, which has a status of "Pending Feature Requests"). This has been implemented in RHF Plus, which is intended to be a compatible replacement for react-hook-form with some additional opt-in features. See the docs.

Disclaimer: I haven't used RHF-plus and I can't confirm how well that feature works.

[Nedunchezhiyan-M]

The issue is that shouldUseNativeValidation: true combined with mode: "onChange" triggers the browser's built-in constraint validation API on every keystroke. Since type="email" has built-in validation, the browser shows the tooltip immediately when the value isn't a valid email yet.

Workaround without per-field mode:

You can disable native validation for just the email field by using type="text" with a custom validate function instead:

<input
  autoFocus={true}
  autoComplete="email"
  placeholder={emailInputPlaceholder}
  spellCheck={false}
  type="text"           // Use "text" instead of "email"
  inputMode="email"     // Still shows email keyboard on mobile
  {...register("email", {
    required: "Email is required",
    validate: (value) =>
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || "Please enter a valid email address",
  })}
/>

This gives you:

• onChange validation with your own custom message (no aggressive browser tooltip)
• inputMode="email" still shows the @ keyboard on mobile devices
• Other fields can keep using native validation normally

The key insight is that native validation warnings come from the type attribute, not from react-hook-form. By switching to type="text" + inputMode="email" + custom validate, you get the same UX without the premature browser tooltip.

[chrisjcthomas]

When shouldUseNativeValidation: true is enabled, React Hook Form calls the browser's native .reportValidity() on the input during validation.

If the validation mode is set to onChange, validation runs on every single keypress. This causes the browser to immediately show its native validation warning tooltip as soon as the user starts typing (e.g., after typing the first character m).

React Hook Form does not support overriding the validation mode on a per-field level (it is configured globally for the entire form). However, you can solve this using one of the following approaches:

1. Disable Native Validation and use Custom UI Messages (Recommended)

Native tooltips are difficult to style, cannot be customized easily, and have inconsistent behaviors across browsers. The standard practice is to disable native validation and display custom, accessible error messages:

const { register, formState: { errors } } = useForm({
  mode: "onChange" // Keep change validation
});

return (
  <div>
    <input
      type="email"
      {...register("email", {
        required: "Email is required",
        pattern: {
          value: /\S+@\S+\.\S+/,
          message: "Please include an '@' in the email address"
        }
      })}
    />
    {errors.email && <span role="alert" className="error">{errors.email.message}</span>}
  </div>
);

2. Set Validation Mode to onBlur or onTouched Globally

If you prefer to keep native validation, switching the global validation mode to onBlur or onTouched prevents the validation (and thus the tooltip) from triggering on every keystroke:

const { register } = useForm({
  mode: "onBlur", // Validates only when moving focus away
  shouldUseNativeValidation: true
});

3. Keep global onBlur but trigger specific fields onChange manually

If you want to keep the form validating on blur, but need specific fields (like password confirmation) to revalidate on change, keep mode: "onBlur" and manually trigger validation using the trigger API:

const { register, trigger } = useForm({
  mode: "onBlur",
  shouldUseNativeValidation: true
});

return (
  <input
    type="password"
    {...register("password", {
      required: true,
      onChange: () => trigger("confirmPassword") // Dynamically trigger confirmation validation on change
    })}
  />
);

[BrendanC23]

You can also look at RHF+ which supports changing mode for a single field.