svelte-forms

svelte-forms copied to clipboard

When using an async validator, text inputs can experience stuttering while typing. For example, displaying an error when a username is already taken requires making a request to see whether the inputted username is valid or not. I'm not sure what the exact cause is, but it makes it very hard to use async validators.

A potential fix could consist of either debouncing any async validators or canceling any pending promises in favor of evaluating a newer one. For now, I'll just use external validation on the input to check if the username is taken or not.

Hi @jchanes04,

Thanks for the bug. I manage to reproduce that bug with a high latency connection. I'll work on a fix ASAP.

Meanwhile, a debounced custom validator would fix your issue

@chainlist, it would be awesome to have a specific place for async inside validators so we don't mix things together. The svelte/forms is pretty similar to @angular/forms and maybe the same approach is the best approach (or you can use some tricky magic to see if something is async or not in the same array and do it better).

in @angular/forms we often use this:

myForm = formBuilder.group({ 
    myField: ['Initial Value ', [/* space for validators */], [ /* space for async validators */] ];

And yes, they're debounced and it works pretty well. If you want some help with it I'm happy to contribute. I love svelte and this is by far the best

I wouldn't suggest a deboucer, it will just delay the problem 😅

try this instead:

 <input
   type="text"
   on:keyup={(e) => ($yourcustomfield.value = e.target.value)}         
 />

the docs say that you should bind the value to the variable but for some reason it will change the value in the input field back to the last known value that has been checked, which causes the problem I believe.