表单提交后验证重置 [英] Validation reset after form submission

问题描述

我有一个带有复选框的表单，我希望用户至少选择其中一个.一切正常，但在重置表单后，我无法隐藏验证消息.这种情况在文档，但提供的解决方案似乎无效，因为提交表单后会出现验证错误.

I've got the form with checkboxes and I want the user to select at least one of them. Everything works fine, but after resetting the form I can't hide the validation message. This case is described exactly in the docs, but the provided solution seems to be invalid because after submitting the form validation errors show up.

    <template>
      <v-app>
        <v-content>
          <playground></playground>
          <v-card class="mx-auto" outlined>
            <ValidationObserver ref="obs" v-slot="{ invalid, valid, validated, passes, reset }">
              <v-card-title class="pb-0">Meal types</v-card-title>
              <v-row justify="center">
                <v-col cols="11">
                  <v-form ref="form">
                    <ValidationProvider rules="required" v-slot="{ errors, failedRules }">
                      <v-container row pa-0>
                        <v-row justify="space-around">
                          <v-checkbox
                            v-model="mealType"
                            value="BREAKFAST"
                            label="Breakfast"
                            hide-details
                          ></v-checkbox>
                          <v-checkbox v-model="mealType" value="DINNER" label="Dinner" hide-details></v-checkbox>
                          <v-checkbox v-model="mealType" value="SUPPER" label="Supper" hide-details></v-checkbox>
                          <v-checkbox v-model="mealType" value="SNACK" label="Snack" hide-details></v-checkbox>
                        </v-row>
                      </v-container>
                      <v-row justify="center">
                        <v-alert
                          v-if="failedRules.required"
                          type="error"
                          dense
                          outlined
                          class="mt-4 mb-0"
                        >Select at least one meal type</v-alert>
                      </v-row>
                    </ValidationProvider>
                  </v-form>
                </v-col>
              </v-row>
              <v-card-actions>
                <v-row justify="center">
                  <v-btn text color="deep-purple accent-4" @click="passes(addRecipe)">Save</v-btn>
                  <v-btn @click="reset">Reset</v-btn>              
                </v-row>
              </v-card-actions>
            </ValidationObserver>
          </v-card>
        </v-content>
      </v-app>
    </template>

    <script>
    import Playground from "./components/Playground";

    export default {
      name: "App",
      components: {
        Playground
      },
      data() {
        return {
          recipeName: "",
          mealType: []
        };
      },
      methods: {
        addRecipe() {
          console.log("add recipe");
          // after save or reset alerts should disappear..
          this.$refs.form.reset();
          requestAnimationFrame(() => {
            this.$refs.obs.reset();
          });
        }
      }
    };
    </script>

具有重现用例的代码沙箱:https://Codesandbox.io/s/vee-validate-3-reset-checkbox-validation-qr8uw请选择一些膳食类型并点击保存.单击保存按钮后，表单将重置并显示验证消息，但不应该.如何解决这个问题?

Code Sandbox with reproduced use case: https://codesandbox.io/s/vee-validate-3-reset-checkbox-validation-qr8uw Please select some meal types and click save. After clicking the save button, the form is reset and the validation message shows up, but it shouldn't. How to solve this?

推荐答案

找到了一个解决方法，可以帮助您解决问题(原文带有 this.$refs.form.reset()), 一定是个bug，应该上报给VeeValidate解决.

Found a workaround, which will help you solving the issue (the original with this.$refs.form.reset()), has to be a bug, and should be reported to VeeValidate for solving.

我发现使方法async，并手动重置变量使其一切正常.

I found out making the method async, and resetting the variable manually made it all work out.

methods: {
  async addRecipe() {
    console.log("add recipe");
    console.log(this.mealType);

    this.mealType = [];
    this.$refs.obs.reset();
  }
}

这篇关于表单提交后验证重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！