beizhedenglong/vue-hooks-form

hi! how to validate array of checkboxes

newbie78 opened this issue · 1 comments

for example this array:

<input name="room[]" type="checkbox" />
<input name="room[]" type="checkbox" />
<input name="room[]" type="checkbox" />

tnx!

@newbie78 Hi, try this demo

<template>
  <form @submit="onSubmit">
    errors: {{errors}}
    values: {{values}}
    <br>
    <input type="checkbox" id="jack" value="Jack" v-model="names.value">
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="names.value">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="names.value">
    <label for="mike">Mike</label>
    <button type="button" @click="() => names.validate()">validate names</button>
  </form>
</template>

<script>
import { useForm } from '../../src'

export default {
  setup() {
    const {
      useField, validateFields, validateField, errors, values,
    } = useForm({
      defaultValues: {
        names: [],
      },
      validateMode: 'submit',
    })
    const names = useField('names', {
      rule: {
        type: 'array',
        required: true,
      },
    })
    return {
      names,
      validateField,
      errors,
      values,
      async onSubmit(e) {
        e.preventDefault()
        await validateFields() // form-level validation
      },
    }
  },
}
</script>