Vue.js中表单提交验证函数异常：首次提交提示错误问题

Hey there! Let's break down that annoying first-click validation bug you're hitting in Vue—this is a super common gotcha with form validation state updates, so let's fix it together.

What's Probably Going Wrong #

The root issue almost always boils down to validation state timing:

• If your validateAll() is asynchronous (like when using libraries like VeeValidate, or if you've got async checks in your custom logic), you're likely checking an outdated "valid" status before the validation actually finishes running on the first click.
• Or, your form's validation state is initialized as "valid" by default, and validateAll() updates it—but the alert runs before that state update takes effect (thanks to Vue's reactivity batch updates). The second click works because the state has already been updated from the first run.

Fix 1: For Custom Synchronous Validation #

If you're writing your own sync validation logic, make sure you explicitly update and check the validation state after running validateAll(), and don't default to "valid" initially.

Here's a corrected example:

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" placeholder="Username" />
    <input type="email" v-model="formData.email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: "",
        email: ""
      },
      isFormValid: false // Don't default to true!
    };
  },
  methods: {
    validateAll() {
      // Reset validity first, then check each field
      this.isFormValid = true;

      if (!this.formData.username.trim()) {
        this.isFormValid = false;
      }
      if (!this.formData.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
        this.isFormValid = false;
      }
    },
    handleSubmit() {
      // Run validation FIRST, then check the updated state
      this.validateAll();
      
      if (this.isFormValid) {
        alert("submitted");
        // Execute your actual form submission logic here
      } else {
        alert("not submitted");
      }
    }
  },
  created() {
    // Initialize validation state on component load
    this.validateAll();
  }
};
</script>

Fix 2: For Asynchronous Validation (e.g., VeeValidate) #

If you're using a third-party library where validateAll() returns a Promise, you must wait for the promise to resolve before checking the result. Use async/await for cleaner code:

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" v-validate="'required'" placeholder="Username" />
    <input type="email" v-model="formData.email" v-validate="'required|email'" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: "",
        email: ""
      }
    };
  },
  methods: {
    async handleSubmit() {
      // Wait for validation to complete fully
      const isValid = await this.$validator.validateAll();
      
      if (isValid) {
        alert("submitted");
        // Submit logic here
      } else {
        alert("not submitted");
      }
    }
  }
};
</script>

Key Takeaways #

• Never rely on an initial "valid" state—always run validation on component mount and before every submit.
• If validation is async, always await it before making decisions about the form's validity.
• Double-check that validateAll() is actually updating your validation state (or returning a correct boolean) before you use it.

内容的提问来源于stack exchange，提问作者Ashwini