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

Debouncing Field Validation

Aperta
#369 15 commenti 18 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
7.4k
Fork
497
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### Are you submitting a **bug report** or a **feature request**?

Feature Request

### What is the current behavior?

Currently, there is no way I can find that would allow for debouncing field-level validation. Field-level validation is very nice, but rerunning the validation on every keystroke makes for a poor user experience and lower performance.

Async field-level validation also results in firing off numerous async requests with no trivial way to debounce that, either. Even the [linked example for asynchronous validation](https://codesandbox.io/s/wy7z7q5zx5) demonstrates this poor rapid-fire async behavior. (Select username field, select a different field, select username field again. Try typing: "Georgeee" at a moderate pace, and watch as the "username taken" message appears and rapidly disappears as the previous async validation returns and then is replaced by the next async validation)

Right now, even pausing the validation via the form API will result in react-final-form completely stopping all form changes until validation is resumed.

### What is the expected behavior?

The ability to debounce validation. All validation should optionally be delayed until a set interval has passed without the form changing. This will reduce the pressure caused by firing numerous async validations, reduce overhead associated with validating even one field on every render, and improve the user experience by delaying error display until typing is completed. Even at 60wpm validation will be triggered on a field as frequently as 5 times every single second.

### Other information

There was [another issue](https://github.com/final-form/react-final-form/issues/353) on this same topic, but the author closed the issue and received no responses.

I have searched pretty far and wide on this issue and have not found any satisfactory answer. Some people have attempted variations of it, but as far as I can tell none have succeeded. It seems like performing field-level validation at absolutely every single render/update is deeply built into final-form itself. There is absolutely no way right now for validation to separated cleanly from the process, and no way for errors to be delivered truly asynchronously using the built-in validation functions.

I could be wrong, and maybe I am! If so, please demonstrate how you can cause a field validation to fire only once when typing stops.

Using OnBlur validation could be one potential solution to help avoid this problem, but it seems more like a bandaid than a true fix.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l’esempio collegato di validazione asincrona e con il comportamento dell’API del form descritto nell’issue, quindi traccia come viene attivata la validazione a livello di campo durante la digitazione. Il lavoro è completato quando il progetto dispone di un modo concordato per ritardare la validazione fino allo scadere dell’intervallo configurato senza modifiche al form, incluso il comportamento della validazione asincrona.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
28/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.