final-form / final-form/react-final-form

Async field & async record level validation

Open
#968 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

If the record-level validation is async, it waits for async field-level validation. Is there a way around this?

Say there's a validation error on the `email` field. When I type in the `username` field, `email`s error will be `undefined` until `username` resolves. This causes all of the shown errors to flicker whenever typing in `username`.

This comes from using `yup` for record-level validation, and debouncing a field-level validation.

EDIT: Ah, `schema.validateSync` fixed the issue, turning record-level into synchronous. Still wondering, though?

```js
function sleep() {
return new Promise((resolve) => { setTimeout(resolve, 1000); });
}

export default function Foo() {
return (
{
const errors = {};
if (!values.email) {
errors.email = 'Required';
}
return errors;
}}
render={() => (

{ await sleep(); }}
render={({ input, meta }) => (

)}
/>
(
<>

{(meta.touch && meta.error) && meta.error}

)}
/>

)}
/>
);
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.