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?

Hi - thanks for the quick reply!! Yup, I’ve literally just noticed that error too!

I’ve implemented validation with Vuelidate following this guide: https://medium.com/@email_47764/quasar-form-validation-with-vuelidate-b3aeb3d27fc2

However, when I try to extend that and use a validation rule that requires a parameter (like minLength or maxLength, the input field is no longer rendered. Everything works fine up until I add in the min/max rules?!

This is my template:

<template>


                <form @submit.prevent.stop="handleSubmit" class="pb-8 mb-4 w-4/12">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
                        <q-input
                            v-model.trim="user.name"
                            outlined
                            autofocus
                            label="Name"
                            @input="$v.user.name.$touch()"
                            :rules="[
                                val => $v.user.name.required || 'Name is required',
                                val => $v.user.name.minLength || "Minimum length is 2 characters",
                               val => $v.user.name.maxLength || "Maximum length is 40 characters",
                            ]"
                            lazy-rules
                        ></q-input>
                    </div>

                    <div class="mb-6">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label>
                        <q-input
                            v-model.trim="user.email"
                            outlined
                            label="Email"
                            @input="$v.user.email.$touch()"
                            :rules="[
                                val => $v.user.email.required || 'Email is required',
                                val => $v.user.email.email || 'Please enter a valid email address',
                                val => $v.user.email.maxLength || "Maximum length is 255 characters",
                            ]"
                            lazy-rules
                        ></q-input>
                    </div>


                    <button type="submit" class="w-full bg-red-500 hover:bg-red-700 text-white font-bold p-4 rounded-full focus:outline-none focus:shadow-outline">Save</button>
                    <router-link :to="{ name: 'admin.users' }" class="mt-5 block text-sm hover:font-bold" >Cancel</router-link>
                </form>
            </div>
        
        </div>

    </div>

</template>

<script>
import { required, email, minLength, maxLength } from 'vuelidate/lib/validators';

export default {
    data () {
        return {
            user: {
                name: '',
                email: '',
            }
        }
    },

    methods: {
        handleSubmit() {
            this.errors = this.$v.user.$anyError;

            if ( this.errors === true ) {
                return;
            }

            axios.post('users', this.user)
                .error((error) => {
                    $this.$q.notify({
                        type: 'negative',
                        message: 'There was a problem processing your request',
                        progress: true,
                    })
                })
                .then(() => {
                    this.$q.notify({
                        type: 'positive',
                        message: `User has been created successfully.`,
                        progress: true,
                    })
                })
                .then(() => {
                    this.$router.push({
                        name: 'users'
                    });
                });
        }
    },

    mounted () {
    },

    validations: {
        user: {
            name: {
                required,
                minLength: minLength(2),
                maxLength: maxLength(40),
            },
            email: {
                required,
                email,
                maxLength: maxLength(255),
            },
        },
    }
}
</script>