Vue Validator - validate multipart form of checkboxes

by James Doyle

HTML

<script src="https://cdn.jsdelivr.net/vue.validator/2.0.2/vue-validator.min.js"></script>
<validator name="validation">
  <p>Checkboxes</p>
  <label><input type="checkbox" name="checkboxes[]" v-model="checkboxes[0]" v-validate:checkboxes[0]="{ required: true }">Accept Item 0</label>
  <label><input type="checkbox" name="checkboxes[]" v-model="checkboxes[1]" v-validate:checkboxes[1]="{ required: true }">Accept Item 1</label>
  <label><input type="checkbox" name="checkboxes[]" v-model="checkboxes[2]" v-validate:checkboxes[2]="{ required: true }">Accept Item 2</label>
  <p>Radios</p>
  <label><input type="radio" name="radios" value="1" v-model="radios" v-validate:radios="{ required: true }">Option 0</label>
  <label><input type="radio" name="radios" value="2" v-model="radios" v-validate:radios="{ required: true }">Option 1</label>
  <label><input type="radio" name="radios" value="3" v-model="radios" v-validate:radios="{ required: true }">Option 2</label>
  <div v-if="$validation.valid">Valid</div>
  <div v-else>Invalid</div>
  <p>Checkboxes: {{ checkboxes | json }} Radios: {{ radios | json }}</p>
</validator>

JavaScript

Vue.config.debug = true;

Vue.use(VueValidator);

var app = new Vue({
  el: "body",
  data: {
    checkboxes: [],
    radios: null
  }
});