Formik: validateForm always resolve as valid.

Created on 14 Jun 2019  路  5Comments  路  Source: formium/formik

I have a problem with validateForm it's always resolved as 'valid' event if it's not.
Is it because I'm using it with validate instead of validationSchema?

<Formik
      initialValues={props.initialValues}
      onSubmit={props.onSubmit}
      validate={validate}
      render={({ validateForm }) => (
            <Button
              color="primary"
              onClick={() => validateForm().then(() => console.log('valid'))}
            >
             Validate
            </Button>
/>

// Validation example
const validate = combineValidators({
    name: isRequired({ message: `Please fill the name field` })
});
Formik

All 5 comments

This has been fixed in v2 (here): #1575

npm i formik@next

This is still a problem, using formik 2.0.6. An empty form with schema validation should show errors after calling validateForm(). Schema:

`const validationSchema = Yup.object({

username: Yup.string('Enter a euid').matches(
/^[a-zA-Z0-9]{3,11}$/,
${usernameError},
),
password: Yup.string('').matches(
/^(?=.[a-z])(?=.[A-Z])(?=.*[0-9])[^\]{8,30}$/,
${passwordError},
),
})

`

Hi,

I am facing the same issue, with a button that I use to trigger a custom action.

Validation does not work (it always returns valid even if the Yup schema is not respected) using validateForm().

 <button
type="button"
className="button is-danger"
onClick={async () => {
formikBag.setSubmitting(true);
// validateForm() does not work...
await formikBag.validateForm();>
// ..... do stuff
My button
</button>

the validateForm always resolve with errors as its data. If validation success then empty object {} will return

so, this is what i did =>

      const errors = await formRef.current.validateForm();
      if (Object.keys(errors).length === 0 && errors.constructor === Object) {
        //return empty object = {}
        console.log("success");
      } else {
        //failed
        console.log("failed");
      }

I think this is the right way to think of it. After all, the "validation function" succeeded. validateForm should only throw if it actually fails, like

// Formik can't tell if this is valid or not, so it should throw an error
errors.myField = oopsNonExistentFunction(values.myField);
Was this page helpful?
0 / 5 - 0 ratings

Related issues

PeerHartmann picture PeerHartmann  路  3Comments

giulioambrogi picture giulioambrogi  路  3Comments

green-pickle picture green-pickle  路  3Comments

najisawas picture najisawas  路  3Comments

outaTiME picture outaTiME  路  3Comments