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 withJSON.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 => 'At least one ' + field + ' needs to be checked.',
validate: (value, [testProp]) => {
const options = this.options;
// console.log('questions', value, testProp, options.some((option) => option[testProp]));
return value || options.some((option) => option[testProp]);
}
});
},
methods: {
validateBeforeSubmit(e) {
this.$validator.validateAll(); // why is oneChecked not validated here? --> manually trigger validate below
this.options.forEach((option) => {
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) => h(Checkboxes)
})
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.18/vee-validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<div id="app">
</div>
<script id="checkboxTmpl" type="text/template">
<form @submit.prevent="validateBeforeSubmit">
<input v-model="text" name="text" v-validate.initial="text" data-vv-rules="required|min:3" placeholder="required input" />
<p v-show="errors.has('text')">{{ errors.first('text') }}</p>
<br/>
<label v-for="(option, index) in options">
<input type="checkbox" v-model="option.checked" name="check0" v-validate.initial="option.checked" data-vv-rules="oneChecked:checked" data-vv-as="checkbox" />Checkbox {{index}}
</label>
<p v-show="errors.has('check0')">{{ errors.first('check0') }}</p>
<pre>{{options}}</pre>
<button type="submit">Submit</button>
</form>
</script>