javascript - Cannot get react-hook-form to validate an email properly - Stack Overflow

admin管理员组

文章数量:1391974

I have spent ages trying to get this to validate properly but it just isn't happening. Ive added some text at the bottom to output when an error occurs regarding the email however it always says no error, no matter what.

Edit: Sandbox link -

Here is my input:

           <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>

Here is my hook:

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

I have spent ages trying to get this to validate properly but it just isn't happening. Ive added some text at the bottom to output when an error occurs regarding the email however it always says no error, no matter what.

Edit: Sandbox link - https://codesandbox.io/s/damp-star-8gv3l

Here is my input:

           <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>

Here is my hook:

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

• javascript
• reactjs
• forms
• next.js
• react-hook-form

Share Improve this question Follow edited Dec 17, 2021 at 15:46 squish asked Dec 17, 2021 at 15:29 squishsquish 1,12622 gold badges1717 silver badges3333 bronze badges 5

• Can you provide a codesandbox please ? It's easier to help you – Joris Commented Dec 17, 2021 at 15:34
• Sure thing! one moment @Joris – squish Commented Dec 17, 2021 at 15:38
• @Joris link added! thank you – squish Commented Dec 17, 2021 at 15:46
• The main issue I see here is that there is no form, and no way to submit the form. – Jake Worth Commented Dec 17, 2021 at 15:53
• @JakeWorth in my actual file I have a form and a way to submit, Im just struggling with the inputs and their validations. – squish Commented Dec 17, 2021 at 15:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

According your codesandbox, here is what you've to change:

• Add <form /> tag
• Add mode: 'onChange' in useForm options to display the error while typing in the input
• Add a submit button if you want to trigger validation on submit
• Display error message passed in validation

Working codesandbox: https://codesandbox.io/s/autumn-sea-ps37x?file=/pages/index.js

本文标签： javascriptCannot get reacthookform to validate an email properlyStack Overflow