React Hook Form: Display helper text on "onBlur" while in "onChange" validation mode?

Viewed 709

I'm using react-hook-form for form validation in onChange mode, because I want to disable the Submit button until all inputs are valid. However, I would like to have some of the validation error textfields not to show until the focus has shifted (onBlur). For example I don't want to show a "Password should be at least 8 characters long" message while the user has just begun typing in the password. Because I'm using MUI components, I have the inputs wrapped in a Controller element:

<Controller
  name="password"
  control={control}
  rules={{
    required: "This field is required.",
    minLength: {
      value: 8,
      message: "Password should be at least 8 characters long.",
    },
  }}
  render={({ field, fieldState: { error } }) => (
    <TextField
      {...field}
      label={"Password"}
      type={"password"}
      error={!!error}
      helperText={error ? error.message : null}
      required
      fullWidth
    />
  )}
/>

enter image description here So in this case it's the helperText attribute that makes the HelperText component show up if the field has errors. I don't want to show errors while the user is typing the password, although I do want to validate the form on each keystroke in order to keep the Submit ("Register") button disabled until the form is valid. Does react-hook-form offer any solution for this or is this even possible?

0 Answers
Related