Custom checkbox validation on submit I have the code below which is working as expected. It is doing a form validation with Vue.js and Vee-Validate. It is checking that at least one checkbox is checked.

I only don't like that I have to manually call validate for oneChecked-Validator on form submission. With-out the call it's not validating on submit.

It would be great if someone could review my code and give me an advice to the following points:


How can I configure Vee Validator so that it evaluates the oneChecked validator with the call of this.$validator.validateAll();?
Is it possible to pass the this.options array into validate method of oneChecked validator? (Would be more re-usable. I've tried passing as array with JSON.stringify but couldn't get it to work.)


If there is more to improve please let me know. I'm using Vee-Validate for the first time.

You can also find the same code at jsfiddle.



const Checkboxes = {
  template: '#checkboxTmpl',
  data() {
    return {
      text: '',
      options: [{
        id: 0,
        checked: false
      }, {
        id: 1,
        checked: false
      }, {
        id: 2,
        checked: false
      }]
    };
  },
  created() {
    this.$validator.extend('oneChecked', {
      getMessage: field =&gt; 'At least one ' + field + ' needs to be checked.',
      validate: (value, [testProp]) =&gt; {
        const options = this.options;
        // console.log('questions', value, testProp, options.some((option) =&gt; option[testProp]));
        return value || options.some((option) =&gt; option[testProp]);
      }
    });
  },
  methods: {
    validateBeforeSubmit(e) {
      this.$validator.validateAll(); // why is oneChecked not validated here? --&gt; manually trigger validate below
      this.options.forEach((option) =&gt; {
        this.$validator.validate('check0', option.checked, ['checked'])
      });

      console.log('validator', this.errors);
      if (!this.errors.any()) {
        alert('succesfully submitted!');
      }
    }
  }
};

Vue.use(VeeValidate);

const app = new Vue({
  el: '#app',
  render: (h) =&gt; h(Checkboxes)
})
&lt;script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.18/vee-validate.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"&gt;&lt;/script&gt;

&lt;div id="app"&gt;

&lt;/div&gt;

&lt;script id="checkboxTmpl" type="text/template"&gt;
  &lt;form @submit.prevent="validateBeforeSubmit"&gt;
    &lt;input v-model="text" name="text" v-validate.initial="text" data-vv-rules="required|min:3" placeholder="required input" /&gt;
    &lt;p v-show="errors.has('text')"&gt;{{ errors.first('text') }}&lt;/p&gt;
    &lt;br/&gt;

    &lt;label v-for="(option, index) in options"&gt;
      &lt;input type="checkbox" v-model="option.checked" name="check0" v-validate.initial="option.checked" data-vv-rules="oneChecked:checked" data-vv-as="checkbox" /&gt;Checkbox {{index}}
    &lt;/label&gt;
    &lt;p v-show="errors.has('check0')"&gt;{{ errors.first('check0') }}&lt;/p&gt;
    &lt;pre&gt;{{options}}&lt;/pre&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
&lt;/script&gt;
How can I configure Vee Validator so that it evaluates the oneChecked validator with the call of this.$validator.validateAll();?


Yes, you can use validateAll(), you're just not passing the fields for it to validate. Here's an example on how to do this:

methods: {
  validateBeforeSubmit(e) {
    this.$validator.validateAll({
      name0: true
    });
    console.log('validator', this.errors);
    if (!this.errors.any()) {
      alert('succesfully submitted!');
    }
  }
}


Taken from here.


  Is it possible to pass the this.options array into validate method of oneChecked validator? (Would be more re-usable. I've tried passing as array with JSON.stringify but couldn't get it to work.)


Why pass it as a parameter when it's already a constant?

Consider this:

created() {
  this.$validator.extend('oneChecked', {
    getMessage: field =&gt; 'At least one ' + field + ' needs to be checked.',
    validate: (value, [testProp]) =&gt; {
      return value || Checkboxes.data().options.some((option) =&gt; option[testProp]);
    }
  });
},


This also provides you some protection for when data().options inevitably has more than 3 elements in it.