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
/>
)}
/>
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?