How to trigger validation in formik after rendering?

Question

I have one question with formik. Basically, I will have a table which list all the Id of the forms which have errors. When user click on the Id of a form, it will show up the form itself. The requirement is the errors should be showing also when the form is rendered. Does anyone know how to do that with Formik ? Also, if user edit the field the field validation should works as normal.

I put the codesandbox link here. https://codesandbox.io/s/pensive-brattain-yyls2. Basically I want that when the form show up I should see the errors, not just when user move away from the field or changing it. Thank you.

import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";

class Post0 extends React.Component {
   validateEmptyName(value) {
      if (!value) {
        return "Invalid Name";
      }
   }

 render() {
  return (
  <div>
    <Formik
      initialValues={{
        email: "",
        animal: ""
      }}
      onSubmit={values => {
        this.props.nextStep(values);
      }}
      render={({ values, isSubmitting }) => (
        <Form>
          <Field
            name="email"
            type="email"
            value={values.email}
            component={TextField}
            variant="outlined"
            validate={this.validateEmptyName}
          />
          <Field
            name="animal"
            value={values.animal}
            component={TextField}
            variant="outlined"
          />

          <button type="submit">Submit</button>
        </Form>
      )}
    />
  </div>
);

} }

Answer 1

I made a basic demo version using a custom input component. Formik has no built-in options to do this so unfortunately you need to create your own field components to integrate with Formik's props and bypass the logic that won't show validations if the form's not touched.

const Input = ({ field, form }) => {
  useEffect(() => {
    form.validateForm();
  }, []);

  return (
    <div>
      <input
        style={{
          border: form.errors[field.name] ? "1px solid red" : "1px solid #ccc"
        }}
        name={field.name}
        value={field.value}
        onChange={field.onChange}
      />
      {form.errors[field.name] && (
        <span style={{ color: "red" }}>{form.errors[field.name]}</span>
      )}
    </div>
  );
};

And then pass this as the component prop on your <Field/>.

Formik does provide an isInitialValid prop which you could set to false on the main Formik component, but again the library TextFields you're using won't display anything without the touched prop.

Answer 2

2021 update:

Use validateOnMount prop:

https://formik.org/docs/api/formik#validateonmount-boolean