I've been struggling for a long time to make this validation work correctly, but it seems impossible. I even added some text at the bottom to display an error message related to the email, but it always shows no error, regardless of the situation.
Edit: Sandbox link - https://codesandbox.io/s/damp-star-8gv3l
This is the input section:
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email address
</label>
<div className="mt-1">
<input
{...register("email", {
required: {
value: true,
message: "Please enter your email address",
},
pattern: {
value:
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
message: "Invalid email address",
},
})}
id="email"
name="email"
type="email"
autoComplete="off"
className={`input w-full ${
!errors.email && dirtyFields.email && "!bg-green-50"
}`}
/>
{errors.email ? "error" : "no error"}
{errors.email?.message && (
<ErrorMessage>{errors.email?.message}</ErrorMessage>
)}
</div>
And here is my hook setup:
const {
register,
watch,
control,
formState: { errors, isValid, dirtyFields },
} = useForm<SignupProps>({
defaultValues: {
email: "",
password: "",
confirmPassword: "",
username: "",
firstName: "",
surname: "",
isShop: false,
},
});