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.