If anyone’s interested, I tried both vue-multiselect and vue-treeselect, but none of them gave me the exact functionality of grouping, with unselectable parent items and filtering on all items shown. So I mocked up what I needed using a q-select and q-items: https://codepen.io/jammy-git/pen/KKdarbP?editors=1011

I’m looking to display an icon at the top of the q-form to display the validation status of the form. When invalid it’ll show an exclamation mark and when valid, a tick mark. I’d like this icon to update automatically/reactively - is there a valid attribute on the q-form component that I can use, rather than have to call validate() after every user input?

That works perfectly! Thank you!

I need to ensure the user has select an option in an option group when the form is submitted, but it looks like the q-option-group doesn’t have any validation built in (no rules prop, etc). Is this the case? Is it not possible to add validation to q-option-group?

When the validation fails on an input field, the input gets a nice red border and the red error message is displayed below. I notice if you change the text-negative to text-positive on div.q-field__control, the red border gets changed to green.

Is there anyway to automatically apply this state to the field/input/div automatically when all the validation rules pass?

If anyone’s interested, I tried both vue-multiselect and vue-treeselect, but none of them gave me the exact functionality of grouping, with unselectable parent items and filtering on all items shown. So I mocked up what I needed using a q-select and q-items: https://codepen.io/jammy-git/pen/KKdarbP?editors=1011

I’ve used the select2.js plugin on other projects but I would love to maintain my use of the Quasar framework on this particular project.

I need to have a q-select field, but with option groups to allow the data to be nested. Only the child items should be selectable (as per native optgroups) and preferably it should all be filterable.

Is this possible with a q-select? I couldn’t see any way of using nested data or native optgroups?

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.

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>