Vuelidate empty object on select validation issue

Question

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

Please include the code you tried and indicate what error you're getting and what line the error is occurring on. — PatrickSteele, Mar 28 '18 at 12:19

oniondomes · Accepted Answer · 2018-03-28T13:19:01.523

4

$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.

edited Mar 28 '18 at 13:19

answered Mar 28 '18 at 13:13

oniondomes

2,034
13
22

score 1 · Answer 2 · answered Mar 29 '18 at 07:21

There is missing information about how to use withParams in the documentation of vuelidate page. So i have searched on its github page and found this link . According to link i came up with that solution

import { withParams } from 'vuelidate'

export const checkIfNull = withParams(
  { type: 'required' },
  value => (value.id === null ? false : true)
)

score 0 · Answer 3 · answered Mar 28 '18 at 11:45

0

There is nothing special about validating an object, you just need to define the structure and add any validation rules you require.

Please see the example I created and take another look at the Collections docs.

answered Mar 28 '18 at 11:45

Phunky

481
4
16

it seems it is still invalid – agriboz Mar 28 '18 at 11:54
My example will be invalid until the requirements are me - so enter a name and give a value between 18-60 and it will become valid. – Phunky Mar 28 '18 at 15:59

Vuelidate empty object on select validation issue

3 Answers3