无法提交表单选择选项Vuelidate

Posted 2023-05-09

【中文标题】无法提交表单选择选项Vuelidate

【英文标题】：can't submit form select option Vuelidate

【发布时间】：2021-11-24 19:08:34

【问题描述】：

我正在使用 Vuelidate 0.7.6 版，对于表单验证，我有一个选择的选项来验证它与提交表单，如果选择了验证选项或空选项我有错误我为输入文本编写了相同的代码它有效，但选择否：

         <div class="col-md-4">
                <label for="exampleFormControlS1">Famille:</label>
                <select
                  class="form-control form-control-sm mt-2"
                  id="exampleFormControlSelect1"
                  name="family"
                  v-model="familyId"
                  @change="onChange($event)"
                  :class="
                    'is-invalid': $v.family.$error,
                    'is-valid': !$v.family.$invalid,
                  "
                  ><option value="null">- -- -</option>
                  <option
                    v-for="lineItem in familyListe"
                    :key="lineItem.id"
                    :value="lineItem.id"
                  >
                     lineItem.name </option
                  >
                </select>
                <div class="invalid-feedback">
                  <span v-if="!$v.family.required">Famille requise</span>
                </div>
              </div>

  validations: 
    family: 
      required,
    ,
            

【参考方案1】：

我想您应该将 v-model 更改为“family”而不是“familyId”以正确验证您的字段。

 <select
        class="form-control form-control-sm mt-2"
        id="exampleFormControlSelect1"
        name="family"
        v-model="family"
        @change="onChange($event)"
        :class="
          'is-invalid': $v.family.$error,
          'is-valid': !$v.family.$invalid,
        "
 >...

根据Vuelidate Docs的onChange方法：Form submission

 methods: 
    onChange() 
        console.log("onChange!");
        if (this.$v.$invalid) 
          this.submitStatus = "ERROR";
         else 
          this.submitStatus = "OK";
        
      
    

查看以下 CodeSandbox 了解详情：

https://codesandbox.io/s/***-69434609-vuelidate-t11qy?file=/package.json

【讨论】：

感谢您的反应，我使用相同的代码进行文本输入，仅通过选项即可解决问题，您可以查看图片