Validation reset after form submission

泪湿孤枕 提交于 2019-12-24 03:47:11

问题


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>

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?


回答1:


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.

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();
  }
}


来源:https://stackoverflow.com/questions/59380609/validation-reset-after-form-submission

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!