He pasado años tratando de hacer que esto se valide correctamente, pero simplemente no está sucediendo. He agregado algo de texto en la parte inferior para mostrar cuando ocurre un error con respecto al email , sin embargo, siempre dice que no error , pase lo que pase.

Editar: enlace Sandbox - https://codesandbox.io/s/damp-star-8gv3l

Aquí está mi entrada:

 <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" }`} /> </div> {errors.email ? "error" : "no error"} {errors.email?.message && ( <ErrorMessage>{errors.email?.message}</ErrorMessage> )} </div>

Aquí está mi anzuelo:

 const { register, watch, control, formState: { errors, isValid, dirtyFields }, } = useForm<SignupProps>({ defaultValues: { email: "", password: "", confirmPassword: "", username: "", firstName: "", surname: "", isShop: false, }, });