👀 Views: 62 💬 Answers: 1 📅 Created: 2025-06-12

formik react yup JavaScript

I'm collaborating on a project where I'm using Formik (version 2.2.6) along with Yup for validation in a React application. The form is supposed to validate before submission, but the validation seems to be skipped when I make an async API call in the `onSubmit` function. I can see that the API call is made, but the form validation does not trigger, and I don't receive any error messages that I would expect from Yup. Here’s a simplified version of my code: ```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 format').required('Email is required'), password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'), }); const MyForm = () => { const handleSubmit = async (values, { setSubmitting, setErrors }) => { try { const response = await fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(values), }); if (!response.ok) { throw new Error('Network response was not ok'); } // handle successful submission } catch (error) { setErrors({ email: 'Submission failed. Please try again.' }); } finally { setSubmitting(false); } }; return ( <Formik initialValues={{ email: '', password: '' }} validationSchema={validationSchema} onSubmit={handleSubmit} > {({ isSubmitting }) => ( <Form> <div> <label>Email</label> <Field type="email" name="email" /> <ErrorMessage name="email" component="div" /> </div> <div> <label>Password</label> <Field type="password" name="password" /> <ErrorMessage name="password" component="div" /> </div> <button type="submit" disabled={isSubmitting}>Submit</button> </Form> )} </Formik> ); }; export default MyForm; ``` I’ve checked the console for any errors, and there are none. I also ensured that the Yup validation schema is properly set up and that the `<Formik>` component is wrapping the `<Form>` correctly. The form validation works fine when I comment out the async API call. Is there something I might be missing in the way that async validation interacts with Formik and Yup? Any insights or fixes would be greatly appreciated! The project is a CLI tool built with Javascript. Any pointers in the right direction?