Step 9: Add form validation

Let's implement form validation using Formik to ensure that the form fields meet specific criteria and display appropriate error messages when necessary. We will utilize the validate property provided by the Formik instance. Let's examine the code below:

const Form = () => {
  const formik = useFormik({
    initialValues: {
      // Initial values
    },
    onSubmit: (values, { resetForm }) => {
      // Form submission
    },
    validate: (values) => {
      let errors = {};

      if (values.username.trim() === "") {
        errors.username = "Name can't be empty";
      }

      if (values.occupation.trim() === "") {
        errors.occupation = "Occupation can't be empty";
      }

      return errors;
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="username"
        placeholder="Name"
        onChange={formik.handleChange}
        value={formik.values.username}
      />
      {formik.touched.username && formik.errors.username && (
        <span>{formik.errors.username}</span>
      )}
      <input
        type="text"
        name="occupation"
        placeholder="Occupation"
        onChange={formik.handleChange}
        value={formik.values.occupation}
      />
      {formik.touched.occupation && formik.errors.occupation && (
        <span>{formik.errors.occupation}</span>
      )}
      <button type="submit">Submit</button>
    </form>
  );
};

Code explanation:

• Line 9: The validate property specifies a validation function that checks the values of the form fields.
• Line 12-14: If the username field is empty, the error message Name can't be empty is added to the errors object.
• Line 16-18: If the occupation field is empty, the error message Occupation can't be empty is added to the errors object.
• Line 33-35, 43-45: Conditional rendering is used to display error messages. If formik.errors.username or formik.errors.occupation is truthy, the error message is displayed using the <span> element.

Note

Formik simplifies form validation by providing a convenient way to handle errors and display error messages. By utilizing the validate property and conditional rendering, we can ensure that the form fields meet the required criteria and provide meaningful feedback to users.

Complete code