Using an async validation rule with Vuelidate doesn't work

[jammy-git]

Not sure if this is specific to Vuelidate or when used with Quasar (have also posted a Vuelidate Github issue). I do note that most of the Vuelidate examples have error messages hardcoded and shown using v-if="$v.field.$invalid", which with Quasar is not needed, but might be the cause of this issue?

I’ve put together a pen to demonstrate the problem
https://codepen.io/jammy-git/pen/OJVWjWZ

I understand the fetch API call should return true/false, but in this example, the call response still evaluates to true. As you can see, the error message is always displayed. I’ve had a look at it seems Quasar thinks the async function always returns false?

[s.molinari]

Maybe not use the rules prop and just control the error and error message through the respective QInput props (or QField props, for other form components). This will allow you to also better control the error message, as Quasar only checks the rules in sequence and although required is obviously ok as a first rule in this example, you might want to let the user know of all the rules they might have gotten wrong (or something to that effect) or you might have rules set up, which shouldn’t be sequentially checked.

https://codepen.io/smolinari/pen/ZEGgoWa?editors=1010

Scott

[jammy-git]

Hi Scott - thanks for the suggestion. It does work well. Unfortunately it breaks the q-form submit functionality where the validation is automatically run and any invalid field is highlighted and the submit is stopped.

[s.molinari]

Instead of using Quasar’s validation set up in QForum, just use a submit method via the @click from your submit button to “touch” your vuelidate rules and check them all. Then use the $invalid prop from Vuelidate to make your submission decisions.

https://vuelidate.js.org/#sub-form-submission

Scott