Why is isValid always false for this form?

[mkelley33]

I've included the contact form I'm working on below:

import { navigate } from 'gatsby';
import { toast } from 'react-toastify';
import { useEffect } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

import api from '../api';
import { formGroup } from '@components/common-css';
import Layout from '@components/layout';
import TextInput from '@components/common/forms/text-input';
import TextArea from '@components/common/forms/text-area';

const schema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Your first name must be a minimum of two characters long.')
    .required('First name is required'),
  lastName: Yup.string()
    .min(2, 'Your first name must be a minimum of two characters long.')
    .required('Last name is required'),
  email: Yup.string().email('Invalid email address').required('Email is required'),
  message: Yup.string().required('Message is required'),
  recaptcha: Yup.string().required(),
});

interface IContactForm {
  firstName: string;
  lastName: string;
  email: string;
  message: string;
  recaptcha: string;
}

const ContactForm = () => {
  useEffect(() => {
    document.title = 'Contact Form';
    // Formik causes multiple renders so don't add script multiple times
    if (document.querySelector('#recaptcha')) {
      const script = document.createElement('script');
      script.id = 'recaptcha';
      script.src = 'https://www.google.com/recaptcha/api.js';
      script.async = true;
      script.defer = true;
      (window as any).onSubmit = (token: string) => {
        api.post('/recaptcha', { token }).then((res: any) => {
          if (res.data.error) setValue('recaptcha', '');
          else setValue('recaptcha', token);
        });
      };
      (window as any).onExpired = () => setValue('recaptcha', '');
      document.body.appendChild(script);
    }
  }, []);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isDirty, isValid },
    setValue,
  } = useForm<IContactForm>({
    defaultValues: {
      firstName: '',
      lastName: '',
      email: '',
      message: '',
      recaptcha: '',
    },
    mode: 'onBlur',
    resolver: yupResolver(schema),
  });

  const onSubmitHandler: SubmitHandler<IContactForm> = (data) => {
    // TODO: Add a loading spinner for form submission
    if (isValid) {
      api
        .post(`/contact`, data)
        .then((_res) => {
          navigate('/post-contact');
        })
        .catch((_err) => {
          // TODO: Add logging error message
          toast.error('Something went wrong', {
            position: toast.POSITION.TOP_CENTER,
            hideProgressBar: true,
          });
        });
    }
  };

  return (
    <Layout>
      <section style={{ textAlign: 'center' }}>
        <h1>Contact</h1>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <TextInput id="firstName" name="firstName" type="text" label="First Name" register={register} />
          <TextInput id="lastName" name="lastName" type="text" label="Last Name" register={register} />
          <TextInput
            id="email"
            name="email"
            type="email"
            label="Email"
            autoComplete="username email"
            register={register}
          />
          <TextArea id="message" name="message" label="Message" register={register} />
          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
          <input id="recaptcha" type="hidden" value="" {...register('recaptcha')} />
          <div css={formGroup}>
            <div
              style={{ width: '304px', margin: '0 auto' }}
              className="g-recaptcha"
              data-sitekey={process.env.RECAPTCHA_SITE_KEY}
              data-callback="onSubmit"
              data-expired-callback="onExpired"
            ></div>
          </div>
          <div css={formGroup}>
            <input type="submit" disabled={isSubmitting || !isDirty} />
          </div>
        </form>
      </section>
    </Layout>
  );
};

export default ContactForm;

Note that I'm passing a prop named register to my custom form components, and then on the inputs inside them I'm spreading the call to the register function like so:

import { srOnly, formControl, formGroup } from '@components/common-css';
import Label from './label';
import InputFeedback from './input-feedback';

const TextArea = ({ label, register, id, error, ...props }: any) => (
  <div css={formGroup}>
    <Label css={srOnly} htmlFor={id} error={error}>
      {label}
    </Label>
    <textarea css={formControl} {...register(id)} style={{ height: 168 }} placeholder={label} {...props} />
    <InputFeedback error={error} />
  </div>
);

export default TextArea;

[mkelley33]

One thing I notice is when I inspect the HTML, I see that the form tag is bare of attributes--even the onSubmit attribute. Also, my submit handler never fires either when I click the submit button.

[mkelley33]

I didn't have an onError handler in my call to handleSubmit. The form is submitting now, but sadly isValid remains false and the errors object is empty. So that makes no sense. If the errors object is empty I would assume the form is valid, but it's not.

[mkelley33]

I just used Object.entries(errors).length to determine whether or not my form isValid. I'm pretty sure it's a yupResolver problem so I may file an issue with them.

[leapful]

@mkelley33

Please provide a codesandbox url to re-produce the issue.

[mkelley33]

@leapful https://codesandbox.io/s/cool-morning-ghtjlm here's the codesandbox URL. isValid works, BUT the dependencies are all old, even including the version of typescript used. With typescript 5, yup 1.2.0, and react-hook-form 7.45.1, isValid is false.

[leapful]

@mkelley33

It still works normally with latest version of react-hook-form.

[mkelley33]

@leapful What version of typescript are you running in your sandbox?

[mkelley33]

@leapful The form I shared here is a pared-down version of the one I'm actually using that couldn't be put in a sandbox for technical reasons. But it came down to how I used setValue on a hidden input. At first I had setValue('recaptcha', token) and Object.entries(errors).length was still zero or falsey, but isValid was also false. Then when I added options setValue('recaptcha', token, { shouldValidate: true }, isValid became true.

[mkelley33]

@leapful See sandbox now
https://codesandbox.io/s/cool-morning-ghtjlm?file=/src/contact.tsx

[mkelley33]

See answer above