👀 Views: 83 💬 Answers: 1 📅 Created: 2025-06-20

react react-final-form async-validation javascript

I'm experimenting with I'm performance testing and I'm sure I'm missing something obvious here, but I'm working on a form using React Final Form and I'm trying to implement async validation based on the values of dependent fields... My goal is to ensure that if one field's value is changed, it triggers validation on another field that depends on it. However, I'm encountering an issue where the validation message does not update as expected when I change the dependent field. Here’s a simplified version of my code: ```javascript import React from 'react'; import { Form, Field } from 'react-final-form'; const validateEmail = async (email) => { const response = await fetch(`https://api.example.com/validate-email?email=${email}`); const data = await response.json(); return data.isValid ? undefined : 'Email is already in use'; }; const validateUsername = async (username, allValues) => { if (username && username !== allValues.previousUsername) { return validateEmail(allValues.email); } return undefined; }; const MyForm = () => { return ( <Form onSubmit={formData => console.log(formData)} render={({ handleSubmit, submitting, pristine }) => ( <form onSubmit={handleSubmit}> <Field name="username" validate={validateUsername}> {({ input, meta }) => ( <div> <label>Username</label> <input {...input} type="text" placeholder="Username" /> {meta.error && meta.touched && <span>{meta.error}</span>} </div> )} </Field> <Field name="email" validate={validateEmail}> {({ input, meta }) => ( <div> <label>Email</label> <input {...input} type="email" placeholder="Email" /> {meta.error && meta.touched && <span>{meta.error}</span>} </div> )} </Field> <button type="submit" disabled={submitting || pristine}>Submit</button> </form> )} /> ); }; export default MyForm; ``` I’ve tried calling the validation function directly in the `validateUsername` function, but the validation message for the email field does not seem to update when the username field changes. I also ensured that the state is properly connected, but I’m still seeing stale values being referenced. I'm getting no errors in the console, yet the user experience is not as expected since the email validation does not trigger when it should. Any guidance on how to properly implement this type of async validation in React Final Form would be greatly appreciated! My development environment is Linux. I'd really appreciate any guidance on this. What am I doing wrong? Thanks for taking the time to read this! Any feedback is welcome!