gerhat / material-ui-formik-components

Formik ready material ui components
MIT License
85 stars 13 forks source link

Form validates/shows error for untouched field #2

Closed Jsalaz1989 closed 5 years ago

Jsalaz1989 commented 5 years ago

Hi, I'm testing a simple registration form with an email and a password and the password field shows an error message before I've even gotten to it. Surrounding the form is a <Dialog> and <DialogContent>, but these don't seem to be the problem because I've tried with and without them and I still get the same problem:

<Formik
    initialValues={initVal}
    onSubmit={values => {
        alert(`Email: ${values.email}\nPassword: ${values.password}`);
    }}
>
    <Form> 
        <Field name="email" label="Email" component={TextField} validate={validateEmail} />
        <Field name="password" label="Password" component={TextField} type="password" validate={validatePassword}/>
        <button type="submit">Submit</button>
    </Form>
</Formik>

Specifically, I enter the form for the first time, type into the email field, and as soon as the email displays its error, so does the password field. But I haven't even touched the password field yet! I have to add

if (this.formik.touched.password == null)
    return; 

to the beginning of my password validation function to avoid errors from showing up before the field has even been touched. This works but I don't imagine I'm supposed to do this. With regular Formik, which I have tested and works fine, the <ErrorMessage> only shows up after the field has been touched. You probably already know they implement something like {errors.email && touched.email && <div>{errors.email}</div>} to avoid this specific problem, so I just wanted to check that you're doing the same? I tried looking through your source code but I'm kind of a newb so I didn't really find anything.

Is this behavior expected or is there something wrong with my form?

Thanks

gerhat commented 5 years ago

Hi @Jsalaz1989. This is the intended behaviour. It only checks if the form is dirty and not if the field is touched, but I think you are right. The default behaviour should be to show errors only when the user has touched the field.

gerhat commented 5 years ago

@Jsalaz1989 please try v0.1.4 and let me know if it fixes your issue.

Thanks.