Form validation failed but every field is valid

[atenghamn]

Probably me doing something wrong but can't figure out why my form fails to validate if I use

formState.isValid;

but validates if I validate all of fields individually?

const isValid = () => { return !( getFieldState("email").invalid || getFieldState("message").invalid || getFieldState("name").invalid || getFieldState("phoneNumber").invalid ); };

[IdoBouskila]

Hey @atenghamn,
Are you validating inputs that depend on each other?

Please attach a minimal reproducible example to identify the problem easier :)

[atenghamn]

Yes of course 😄

const onSubmit = (data: EmailParams["form"]) => {
    if (!formState.isValid) {
      return;
    }

   // Send email and so on...
  };
return (
   <form
      noValidate
      onSubmit={(e) => {
        e.preventDefault();
        handleSubmit(onSubmit)();
      }}
      className={clsx(
        "rounded-xl bg-white p-8 text-black",
        "dark:bg-darkBlue dark:text-darkBlue20",
      )}
    >
      <Controller
        name="name"
        control={control}
        rules={{ required: requiredMessage }}
        render={({ field, fieldState }) => (
          <MTextInput
            label="Name"
            {...field}
            required
            value={field.value || ""}
            error={fieldState.error?.message}
          />
        )}
      />
      <Controller
        name="email"
        control={control}
        rules={{
          required: requiredMessage,
          pattern: {
            value: /@.+\..+/,
            message: emailValidationMessage,
          },
        }}
        render={({ field }) => (
          <MTextInput
            required
            label="Email"
            type="email"
            {...field}
            value={field.value || ""}
            error={errors.email?.message}
          />
        )}
      />
      <Controller
        name="phoneNumber"
        control={control}
        rules={{
          pattern: {
            value: /^[+0]/,
            message: phoneValidationMessage,
          },
        }}
        render={({ field }) => (
          <MTextInput
            label="Phone number"
            {...field}
            value={field.value || ""}
            error={errors.phoneNumber?.message}
          />
        )}
      />
      <Controller
        name="message"
        control={control}
        rules={{ required: requiredMessage }}
        render={({ field }) => (
          <MTextArea
            required
            label="Messages"
            autosize
            minRows={5}
            maxRows={5}
            {...field}
            error={errors.message?.message}
          />
        )}
      />
        <div className="gap mt-8 flex justify-center">
        <Button
          type="submit"
          loading={loading}
          className="group"
          classNames={(_theme, props) => ({
            label: clsx(
              "text-white dark:text-primaryBlack buttonsSmall",
              "flex items-center",
            ),
            root: clsx(
              props.disabled ? "bg-darkBlue80" : "bg-primaryOrange",
              "px-4 py-1 text-center",
            ),
          })}
        >
          <span className="text-center">{submitLabel}</span>
          {loading ? (
            <Spinner className="ml-2" />
          ) : (
            <ArrowRight
              size="S"
              className={clsx(
                "max-w-0",
                "group-hoverOrFocus:ml-3 group-hoverOrFocus:md:ml-4",
                "group-hoverOrFocus:visible group-hoverOrFocus:max-w-lg",
                "invisible transition-[maw-width]",
              )}
            />
          )}
        </Button>
      </div>
      </form>
   )

[IdoBouskila]

I need the code of the useForm for more context.
btw, maybe you're expecting the form to validate the inputs onChange but forgot to declare it?

  const { register, handleSubmit, formState: { isValid } } = useForm({
    mode: "onChange",
  });

[atenghamn]

Oh sorry!
It's not expected to validate onChange, the validation should occur when the user press the send button

export function ContactForm({ toEmail }: { toEmail: string }) {
  const { control, formState, handleSubmit } = useForm<EmailParams["form"]>({
    mode: "all",
  });
  const { errors } = formState;

  const locale = useLocale();
  const [loading, setLoading] = useState(false);
  const {
    submitLabel,
    requiredMessage,
    emailValidationMessage,
    phoneValidationMessage,
  } = getLocalMessages({ locale });


  const onSubmit = (data: EmailParams["form"]) => {
    if (!formState.isValid) {
      return;
    }


    setLoading(true);
    fetch("/api/send-email", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        toEmail,
        form: data,
        siteUrl: siteUrl,
      }),
    }).finally(() => setLoading(false));
  };


}