vee validate on custom select2 component not works

Question

I try to use vee-validate on a custom component where if nothing selected on submit should show the validation error

the template looks as it follows

<div id="validate" class="container">
  <form @submit.prevent="store()" data-vv-scope="time-off" autocomplete="off">
    <div class="col-lg-6">
      <div class="form-group">
        <select2 
                 :options="options" 
                 placeholder='Select...'
                 v-validate="'required|in:sick, vacation'" 
                 v-model="form.category"
                 id="categorywidget"
                 class="form-control">
        </select2>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary pull-right">
          Send Request
        </button>
      </div>
    </div>
    </div>
  </form>
</div>

and here is my vue code

Vue.component('Select2', {
  props: ['options', 'value', 'id', 'placeholder', 'clear'],
  template: '<select><slot></slot></select>',
  mounted: function () {
    var vm = this
    $(this.$el)
      .select2({
      data: this.options,
      placeholder: this.placeholder,
      theme: "bootstrap",
      width: '100% !important',
      dropdownAutoWidth : true,
      allowClear: this.clear !== '' ? this.clear : false
    })
      .val(this.value)
      .attr("id", this.id !== null ? this.id : Date.now() + Math.random() )
      .trigger('change')
    // emit event on change.
      .on('change', function () {
      vm.$emit('input', $(this).val())
    })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value).trigger('change');
    },
    options: function (options) {
      // update options
      $(this.$el).select2({data: options})
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
});

Vue.use(VeeValidate)


new Vue({
  el: '#validate',
  data: {
    form: {
      scopes: [],
      category: 'null',
      daterange: '',
      note: ''
    },

    options: [
      {text: 'Vacation', id: 'vacation'},
      {text: 'Sick', id: 'sick'},
      {text: 'Not ok', id: 'not-ok'},
    ]
  },

  methods: {
    store: function() {
      this.$validator
        .validateAll()
        .then(function(response) {
            alert('is ok!')
          // Validation success if response === true
        })
        .catch(function(e) {
          // Catch errors
          alert('not ok!')
        })
    }
  }
});

here is a pen what I created

https://codepen.io/anon/pen/gXwoQX?editors=1111

on submit null the validation is passes. what is wrong with this codes

Richard Matsen Richard Matsen · Accepted Answer · 2017-11-07T23:48:08

There are issues raised on this subject in github - #590, #592.

None of them lead me to a solution, so I'd suggest a check inside the promise

.then(response => {
  if(this.errors.items.length === 0) {
    alert('is valid')
  } else {
    alert('is not valid')
  }

A couple of other notes:

See below, catch() is technically the wrong place to handle validation errors, that should be inside the then(response) and when invalid response === false (but not working because of bug).

The catch() is probably for 'I blew up' errors.

.catch(function(e) {
  // Catch errors
  // alert('not valid')  // don't process these here
})

Also this

v-validate="'required|in:sick, vacation'"

should be this (remove space before vacation)

v-validate="'required|in:sick,vacation'"

vee validate on custom select2 component not works

1 Answers