Title: How to validate multiple input with same name?
Post by: srw962 on December 21, 2018, 12:45:30 AM
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. <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: {} }; },
Title: Re: How to validate multiple input with same name?
Post by: stworthy on December 22, 2018, 12:41:17 AM
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. <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. <DateGroup ref="task" name="task" v-model="user.task"></DateGroup>
3. Define your form data. export default { components: { DateGroup }, data() { return { user: { task: [null, new Date()] }, rules: { }, errors: {} }; },
|