Search code examples
vue.jsvuejs2vuelidate

Vuelidate empty object on select validation issue


I would like to know how to validate empty object using vuelidate. I tried to give a demonstration on jsfiddle as links follows

Vue.use(window.vuelidate.default)
const { required, minLength } = window.validators

new Vue(
    {
        el: "#app",
        data: {
            companies: [
                {
                    id: 1,
                    name: 'facebook'
                }, 
                {
                    id: 2, 
                    name: 'apple'
                }
            ],
            text: {
                id: null,
                name: null
            }
        },
        validations: {
            text: {
                required
            }
        }
    }
)

jsfiddle


Solution

  • $v.text is valid because it is a non-empty object. That means it doesn't have 'falsy' value so it meets the requirement. One way to make it work:

    validations: {
        text: {
            id: {required},
            name: {required},
        },
    },
    

    JSFiddle

    If you don't want to repeat items object structure, you can write a custom validator.