Vuelidate validation minLength or maxLength not working

[jammy-git]

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>

[metalsadman]

@jammy-git while vuelidate isn’t really related to quasar, i’ve used their rules and are working fine. Your snippet above however have some bugs, not sure if that’s what you actually use. example "Maximum length is 255 characters" in template should be single quotes.

[jammy-git]

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

[metalsadman]

@jammy-git this example in the docs can be used similarly with vuelidate https://quasar.dev/vue-components/input#External-validation.