VeeValidate不验证来自动态表单的输入

Angelmartin11

我正在尝试使用vuejs中的veeValidate生成带有验证的动态表单,我试图这样做的方式是通过在组件数据内部创建对象数组来实现,例如:

data(){
   return{
inputs: [
      {
        id: 1,
        label: "first name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      },
      {
        id: 2,
        label: "last name",
        type: "text",
        placeholder: "",
        model: "",
        rules: "required"
      } ]
   }
}

对于html:

  <ValidationObserver v-slot="{ handleSubmit }">
    <b-form @submit.prevent="handleSubmit(onSubmit)" class="p-5">
      <div v-for="inp in inputs" v-bind:item="inp" :key="inp.id">
        <ValidationProvider name="Value" :rules="inp.rules" v-slot="validationContext">
          <b-form-group
            :id="'input-group-'+inp.id"
            :label="inp.label"
            :label-for="'input-'+inp.id"
            label-cols="4"
            label-cols-lg="2"
          >
            <div v-if="inp.type != 'select'">
              <b-form-input
                :type="inp.type"
                :placeholder="inp.placeholder"
                v-model="inp.model"
                :id="'input-'+inp.id"
                :name="'input-'+inp.id"
                :state="getValidationState(validationContext)"
                aria-describedby="input-1-live-feedback"
              ></b-form-input>
              <b-form-invalid-feedback
                :id="'input-'+inp.id+'-live-feedback'"
              >{{ validationContext.errors[0] }}</b-form-invalid-feedback>
            </div>
          </b-form-group>
        </ValidationProvider>
      </div>

      <button type="submit">Submit</button>
    </b-form>
    <div>
      Look at the output
      {{show}}
    </div>
  </ValidationObserver>

当尝试在html上动态生成输入时,此方法工作正常。但是,当我尝试向该动态表单添加表单验证时,问题就来了。我希望/想要做的事情:假设表单有一个提交按钮,如果输入具有“必需”验证,我希望发生的事情是,如果我在不首先输入任何内容的情况下按下按钮,则所有输入都应显示警告信息“此输入是必需的”或类似的内容。

问题:真正发生的是,当您按下提交按钮而未在输入中键入任何内容时,只有最后一个输入显示警告消息。

这是我正在谈论的示例的codeSandbox链接:https ://codesandbox.io/s/codesandbox-733yf?fontsize =14& hidenavigation =1& theme=dark&file=/src/Demo.vue

赖利

当你在里面工作v-for,最好的做法(显然需要),以确定您的ValidationProvider符合S vid,就像这样:

    <ValidationProvider :vid="'vp'+inp.id" name="Value" :rules="inp.rules" v-slot="validationContext">

将其添加到您的示例后,我能够看到您的所有错误消息。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

来自动态生成的表单的Redux值

来自分类Dev

为什么不传递来自表单的输入

来自分类Dev

Elm - 来自动态创建的输入的 onBlur

来自分类Dev

具有动态输入的表单验证

来自分类Dev

验证动态添加的表单输入-Vanilla JS

来自分类Dev

使用 VeeValidate 进行 VueJS 表单验证,无法在某些移动设备上输入

来自分类Dev

来自动态 JSON 的表单构建器字段

来自分类Dev

如何验证数据来自2个输入的表单?

来自分类Dev

来自动态生成的输入的 vue.js 绑定值

来自分类Dev

动态表单输入字段和使用AJAX自动完成

来自分类Dev

jQuery验证动态表单输入上的插件不起作用

来自分类Dev

使用MVP方法验证控件动态的用户表单输入

来自分类Dev

输入填充动态时,AngularJS 表单验证失败

来自分类Dev

需要输入表单验证

来自分类Dev

动态输入表单php

来自分类Dev

动态输入表单php

来自分类Dev

函数不验证输入

来自分类Dev

来自表单输入的PHP数组

来自分类Dev

保存和验证来自表单输入的临时虚拟属性时出现问题

来自分类Dev

如何根据来自selectfield的用户输入动态创建表单中的字段?

来自分类Dev

Verilog:对齐来自动态输入的有效和无效字节

来自分类Dev

Laravel 5动态表单验证

来自分类Dev

jQuery验证动态创建的表单

来自分类Dev

动态生成的输入指令上的AngularJS表单验证不适用于ngForm

来自分类Dev

表单生成后,jQuery验证会为每个输入动态添加规则

来自分类Dev

在动态生成表单输入时进行验证时遇到问题吗?

来自分类Dev

表单生成后,jQuery验证会为每个输入动态添加规则

来自分类Dev

不推送数组的表单验证

来自分类Dev

自动完成的Cakephp表单输入

Related 相关文章

热门标签

归档