I got error when I used "validateField"

al-ani commented 5 years ago

🐛 Bug report

I am trying to use validateField function however I got an error. I am just trying to use the basic example provided by Formik web site.

My code is

import React from 'react'; import { Formik } from 'formik'; const Basic = () => (

{ let errors = {}; if (!values.email) { errors.email = 'Required'; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email) ) { errors.email = 'Invalid email address'; } return errors; }} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 400); }} > {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, validateField /* and other goodies */ }) => ( )}

);

export default Basic;

Current Behavior

When pressing on click, I got the following Error

Expected behavior

I expect to check the validation of the email Input field

Software	Version(s)
Formik	1.5.8
React	16.6.0
TypeScript
Browser	chrom
npm/Yarn
Operating System

ivankoleda commented 5 years ago

I tried to reproduce the issue here https://codesandbox.io/s/formik-example-z1yuc end up getting similar error.

I suppose if there is a form level validation in the code above, there is no field level validation so there is no validate prop passed down to Field like in an example in docs. validateField function assumes that the field you passed have it's own validate prop defined (source).

So the solution might be splitting validation logic into validate props of each Field https://codesandbox.io/s/formik-example-lu6yu Hope that will help with your problem.

al-ani commented 5 years ago

I am using the MATERIAL-UI components, therefore I cannot use Field component. Are you going to fix this bug?

michielmetcake commented 5 years ago

In fact you can use your own JSX component, so is Material UI. And you will get fieldProps passes as argument in the render function.

// Renders an HTML <input> and passes FieldProps field property
<Field
  name="firstName"
  render={({ field /* { name, value, onChange, onBlur } */ }) => (
    <input {...field} type="text" placeholder="firstName" />
  )}
/>

// Renders an HTML <input> and disables it while form is submitting
<Field
  name="lastName"
  render={({ field, form: { isSubmitting } }) => (
    <input {...field} disabled={isSubmitting} type="text" placeholder="lastName" />
  )}
/>

// Renders an HTML <input> with custom error <div> element
<Field
  name="lastName"
  render={({ field, form: { touched, errors } }) => (
    <div>
      <input {...field} type="text" placeholder="lastName" />
      {touched[field.name] &&
        errors[field.name] && <div className="error">{errors[field.name]}</div>}
    </div>
  )}
/>

SachinRaghunathan commented 4 years ago

I like defining the form level validation using Yup. But then, i also want to be able to validate specific fields. Is there no way i can do that?

jaredpalmer / formik