CodexBloom - Programming Q&A Platform

Formik resetForm not clearing validation errors in React

👀 Views: 42 💬 Answers: 1 📅 Created: 2025-06-08
react formik yup validation JavaScript

I'm having trouble with I'm having a hard time understanding I'm trying to figure out I tried several approaches but none seem to work... Hey everyone, I'm running into an issue that's driving me crazy. I'm working on a React application using Formik for handling forms. I've set up a simple form that includes validation using Yup. The scenario I'm working with is when I call `resetForm()` after a successful submission, the form fields get reset correctly, but the validation errors do not clear and still display on the screen. Here's the code snippet that outlines my setup: ```javascript import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const validationSchema = Yup.object().shape({ email: Yup.string().email('Invalid email').required('Required'), password: Yup.string().min(6, 'Too Short!').required('Required'), }); const MyForm = () => { const handleSubmit = (values, { resetForm }) => { console.log('Form data:', values); resetForm(); // This line should reset the form fields and errors }; return ( <Formik initialValues={{ email: '', password: '' }} validationSchema={validationSchema} onSubmit={handleSubmit} > <Form> <div> <label>Email</label> <Field name="email" type="email" /> <ErrorMessage name="email" component="div" /> </div> <div> <label>Password</label> <Field name="password" type="password" /> <ErrorMessage name="password" component="div" /> </div> <button type="submit">Submit</button> </Form> </Formik> ); }; ``` Despite `resetForm()` being called, the validation errors still show up for a split second after resetting the form, which is confusing for the users. I've tested this with Formik version 2.2.6 and Yup 0.32.9. I’ve also tried using `setErrors({})` before calling `resetForm()`, but that didn't seem to solve the scenario either. Has anyone else faced this question, or does anyone have suggestions on how to ensure that validation errors are cleared effectively when resetting the form? This is part of a larger service I'm building. Thanks in advance! My development environment is Linux. This is happening in both development and production on Debian. Any ideas what could be causing this?