4.12.7 broke zod validation

[OlliL]

What happened?

Just create a basic form with a basic field - useForm(), useField() with zod validation. Form submission is not prevented if there are validation errors

I've made a small sample app as showcase for this error. I put in two input field with one static schema and one computed schema based on the input of the first field. Both validations work fine with 4.12.6, but both stop to work with 4.12.7. You can remove the "surname" related code if you fear that causes the problem but even the basic "name" validation stuff alone does no longer work.

<template>
  <div>Showcase</div>
  <br />
  <div>
    <form id="myForm" @submit.prevent="submitMyForm">
      name: <input v-model="name" id="myName" />
      <br />
      surname: <input v-model="surname" id="mySurname" />
      <br />
      <span style="color: #ff0000">myName error: {{ nameFieldError }}</span>
      <br />
      <span style="color: #ff0000"
        >mySurname error: {{ surnameFieldError }}</span
      >
      <br />
      <button type="submit">Submit Form</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { toTypedSchema } from "@vee-validate/zod";
import { useField, useForm } from "vee-validate";
import { computed, ref } from "vue";
import { string } from "zod";

const name = ref("");
const surname = ref("");

const { handleSubmit } = useForm();

// name
const nameSchema = toTypedSchema(string({ message: "Input name" }).min(1));
const { errors: nameFieldError } = useField("myName", nameSchema);

// surname
const surnameSchema = computed(() =>
  name.value
    ? toTypedSchema(string({ message: "Input surname" }).min(1))
    : toTypedSchema(string().optional())
);
const { errors: surnameFieldError } = useField("mySurname", surnameSchema);

const submitMyForm = handleSubmit(() => {
  alert("Submitted name: " + name.value + " / surname: " + surname.value);
});
</script>

Reproduction steps

• install the following dependencies:
  • "@vee-validate/zod": "^4.12.7"
  • "vee-validate": "^4.12.7"
  • "vue": "^3.4.21"
  • "zod": "^3.23.8
• run my code example

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [X] Firefox
• [ ] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

-

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[logaretm]

Thanks for reporting this and for the simple example, this is a nasty one indeed and wasn't just limited to zod.

I published v4.12.8 with the fix, please upgrade.

[OlliL]

Looks good now with 4.12.8. Thanks for fixing this so fast!