Trouble with async validation using React Hook Form
I have a form in my app where a user can enter info for a song. One of the fields is for the spotify url of the song. I made a trpc procedure to get the track info from the spotify url. So if the user pastes the spotify url in the form, it will trigger my query to load the track info, and then I autofill the other form values with the loaded track info. If the query fails, I want the spotify url field to show an error message. I tried to do this by calling
setError when the the query errors, but this way, the user is still able to submit the form. It appears that the correct way to do this kind of async validation is to do the validation on the validate option of the register method, but I don't know how I could wait for the query to finish in the validate function. Any ideas how I could achieve this experience?0 Replies