Touch all fields that have errors

[chriskolenko]

When a person doesn't touch all the fields before hitting next. You don't see any error messages unless you touch the field after the form is validated.

See comment on formik here: jaredpalmer/formik#2734 (comment)

[changeset-bot]

⚠️ No Changeset found

Latest commit: a4f8ef1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[terryjbutler]

I'm currently having this issue on a project I'm working on. It's great to see that there's a a PR for this. Is there any ETA on a release? Great project btw! :)

[groomain]

I'm using this beforeNext function to do it.

const beforeNext = React.useCallback(
    async (
      values: FormikValues,
      formikBag: FormikProps<FormikValues>
    ): Promise<any> => {
      const validationErrors = await formikBag.validateForm();
      if (Object.keys(validationErrors).length > 0) {
        formikBag.setTouched(setNestedObjectValues(validationErrors, true));

        throw new Error("formik error");
      }
    },
    []
  );

[Ransomware0]

Hi, any solution? i use tailwind.
And my code:

<Field type="text" name="responsibleName" id="responsibleName" autoComplete="given-name" placeholder="Aquí tu nombre completo" className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-md-pink-500 focus:outline-none focus:ring-md-pink-500 sm:text-sm" /> {touched.responsibleName && errors.responsibleName ? ( <div className="py-2 px-2 bg-red-500 rounded-md shadow mt-2 text-white text-sm w-full"><ErrorIcon fontSize="small" /> {errors.responsibleName}</div> ) : null}

[Ransomware0]

I'm using this beforeNext function to do it.

const beforeNext = React.useCallback(
    async (
      values: FormikValues,
      formikBag: FormikProps<FormikValues>
    ): Promise<any> => {
      const validationErrors = await formikBag.validateForm();
      if (Object.keys(validationErrors).length > 0) {
        formikBag.setTouched(setNestedObjectValues(validationErrors, true));

        throw new Error("formik error");
      }
    },
    []
  );

In What File?