👀 Views: 80 💬 Answers: 1 📅 Created: 2025-07-06

react formik yup validation javascript

I've hit a wall trying to I'm working on a project and hit a roadblock. I'm working on a form in React using Formik version 2.2.6, where I'm dynamically adding fields based on user input. The issue I'm facing is that the custom validation function for these dynamically added fields is not being triggered as expected. I've set up the form and validation schema using Yup. When I add a new field, it doesn't seem to validate until I interact with it directly. Here’s a snippet of my form setup: ```javascript import React from 'react'; import { Formik, Form, Field, FieldArray } from 'formik'; import * as Yup from 'yup'; const validationSchema = Yup.object().shape({ users: Yup.array().of( Yup.object().shape({ name: Yup.string().required('Name is required'), }) ) }); const MyForm = () => { return ( <Formik initialValues={{ users: [{ name: '' }] }} validationSchema={validationSchema} onSubmit={(values) => console.log(values)} > {({ values, errors, touched }) => ( <Form> <FieldArray name="users"> {({ push }) => ( <div> {values.users.map((_, index) => ( <div key={index}> <Field name={`users.${index}.name`} placeholder="Name" /> {errors.users && errors.users[index]?.name && touched.users && touched.users[index]?.name && ( <div>{errors.users[index].name}</div> )} </div> ))} <button type="button" onClick={() => push({ name: '' })}>Add User</button> </div> )} </FieldArray> <button type="submit">Submit</button> </Form> )} </Formik> ); }; export default MyForm; ``` When I add new fields, they don't validate until I click on them and blur out. I tried calling `validateField` method after pushing a new field but it doesn’t seem to have any effect: ```javascript push({ name: '' }); validateField(`users.${index}.name`); ``` What I really need is for the validation to trigger automatically once I add a new field. Any suggestions on how to achieve this? I’ve also checked the Formik documentation but couldn’t find a solution that addresses this specific case. This is happening in both development and production on Windows 11.