How to validate multiple input with same name?

[srw962]

I use method like below. But when all datebox have input, it also have error msgs.
Can validate without a form? Just like jquery Easyui.

Code:

<Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
  <div style="margin-bottom:20px" v-for="(item, index) in user.task">
    <DateBox name="startTime" v-model="item.startTime"></DateBox>
    <span class="error">{{getError('startTime')}}</span>
  </div>
  <div style="margin-bottom:20px">
    <LinkButton :disabled="false" @click="submitForm()">Submit</LinkButton>
  </div>
</Form>


data() {
  return {
    user: {
      task: [{startTime: null},{startTime: null},{startTime: null}]
    },
    rules: {
      startTime: "required"
    },
    errors: {}
  };
},

[stworthy]

No, a form field must have a unique name. Here is the solution to solve your issue.
1. Extend from FieldBase and custom a component to display multiple DateBox components.

Code:

<template>
  <span>
    <Form ref="form" :model="model" :rules="rules" @validate="errors=$event">
        <div v-for="field in fields" :key="field" style="margin-bottom:20px">
            <DateBox :name="field" v-model="model[field]" @valueChange="onValueChange($event,field)"></DateBox>
            <div class="error">{{getError(field)}}</div>
        </div>
    </Form>
  </span>
</template>

<script>
import { FieldBase } from "vx-easyui";

export default {
  name: "DateGroup",
  extends: FieldBase,
  props: {
    value: Array
  },
  data() {
    return {
      model: {},
      rules: {},
      errors: {}
    };
  },
  computed:{
      fields(){
          return Object.keys(this.model)
      }
  },
  created() {
    for (let i = 0; i < this.value.length; i++) {
      this.model['field' + i] = this.value[i];
      this.rules['field' + i] = 'required';
    }
    this.$on('validate', (valid) => {
      this.$refs.form.validate()
    })
  },
  methods:{
    onValueChange(event, field){
      this.$emit('input', Object.values(this.model));
    },
    getError(name) {
      return this.errors[name] && this.errors[name].length
        ? this.errors[name][0]
        : null;
    },
    hasError(name) {
      if (name){
        return this.getError(name) != null;
      }
      let err = false;
      this.fields.forEach(f => {
        if (this.hasError(f)){
          err = true;
        }
      })
      return err;
    }
  }
};
</script>

2. Then apply it to the form.

Code:

<DateGroup ref="task" name="task" v-model="user.task"></DateGroup>

3. Define your form data.

Code:

export default {
  components: { DateGroup },
  data() {
    return {
      user: {
        task: [null, new Date()]
      },
      rules: {
        
      },
      errors: {}
    };
  },