Vee Validate validation doesn't trigger on form submit

Question

Given a multi-step form using Vee Validate 3.x, I'm having troubles getting my form to trigger validation errors when submitting my form. It works when interacting with an input, but doesn't trigger when on form submit and I'm struggling to understand why and what I can do to resolve this problem.

I'll attach a Codepen link for reference, and here's my markup:

<ValidationObserver v-slot="{ handleSubmit, errors }">
  <pre>
    {{ errors }}
  </pre>
  <form @submit.stop.prevent="handleSubmit(submitDataFromWizard)">
    <h3>Step: {{ editor.step }}</h3>
    <br />
    <!-- Step 1 -->
    <section v-if="editor.step <= 2">
      <ValidationObserver :key="1">
        <validation-provider
          name="first-name"
          rules="required|min:2"
          v-slot="{ errors, classes }"
        >
          <label
            for="first-name"
            class="block text-xs font-medium text-gray-400 mb-2"
            >First Name</label
          >
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              key="editor-data-first-name-input"
              v-model="editor.data.first_name"
              type="text"
              id="first-name"
              class="focus:ring-indigo-500 focus:border-indigo-500 block w-full py-3 px-4 sm:text-sm border-gray-300 rounded-md mb-2"
              :class="getClassesForDataItem(classes)"
              placeholder="your first name..."
            />
          </div>
          <span class="block text-xs text-red-500 mt-1">{{
            errors[0]
          }}</span>
        </validation-provider>
      </ValidationObserver>
    </section>

    <!-- Step 2 -->
    <section v-if="editor.step >= 2">
      <ValidationObserver :key="2">
        <validation-provider
          name="last name"
          rules="required|min:2"
          v-slot="{ errors, classes }"
        >
          <label
            for="last-name"
            class="block text-xs font-medium text-gray-400 mb-2"
            >Last Name</label
          >
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              key="editor-data-last-name-input"
              v-model="editor.data.last_name"
              type="text"
              id="last-name"
              class="focus:ring-indigo-500 focus:border-indigo-500 block w-full py-3 px-4 sm:text-sm border-gray-300 rounded-md mb-2"
              :class="getClassesForDataItem(classes)"
              placeholder="your last name..."
            />
          </div>
          <span class="block text-xs text-red-500 mt-1">{{
            errors[0]
          }}</span>
        </validation-provider>
      </ValidationObserver>
    </section>

    <!-- Submit Form -->
    <button
      type="submit"
      class="flex mt-3 py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 rounded-full"
    >
      <strong v-if="editor.step <= 1">Next step</strong>
      <strong v-if="editor.step == 2">Confirm</strong>
    </button>
  </form>
</ValidationObserver>

And my JS attached is:

export default {
  data() {
    return {
      isEditingData: false,
      editor: {
        step: 1,
        data: null,
      },
    };
  },
  created() {
    this.mockFetchingDataForForm();
  },
  methods: {
    /*
     ** Editor wizard
     */
    submitDataFromWizard() {
      if (this.editor.step >= 2) {
        alert("submit the form");
      }

      // next step
      this.editor.step++;
    },

    /*
     ** Mocked request
     ** NOTE: in the real app, data for v-model inputs comes from API
     */
    mockFetchingDataForForm() {
      setTimeout(() => {
        this.editor.data = {
          first_name: "",
          last_name: "",
        };
        this.isEditingData = true;
      }, 2000);
    },

    /*
     ** Render classes for data item
     */
    getClassesForDataItem(errorClasses, ui = null) {
      if (errorClasses && errorClasses.failed) return errorClasses;
      if (ui == null) return;
      return ui
        ? "border-indigo-300 ring-indigo-50 ring-2"
        : "border-gray-300 ring-gray-50 ring-2";
    },
  },
};

Codepen link: https://codesandbox.io/s/vee-validate-3-sample-project-forked-dwqtt?file=/src/App.vue:3323-4414

Answer 1

Looking at your codesandbox it looks like you are using Vee-validate 3.0.10 . Which does not have support handleSubmit as it was introduced in v3.2 . Although earlier versions starting with 3.0.11 does contain a reference to handleSubmit , it was just in beta and was not officially introduced until v3.2 .

To fix this in your package.json file change

"vee-validate": "3.0.10"`

To

"vee-validate": "3.4.5"

Then run npm update to update the package.

Also, I found this article super helpful to help explain versions in npm.