Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

4.12.7 broke zod validation #4744

Closed
2 of 5 tasks
OlliL opened this issue May 9, 2024 · 2 comments
Closed
2 of 5 tasks

4.12.7 broke zod validation #4744

OlliL opened this issue May 9, 2024 · 2 comments
Labels
🐛 bug Unintended behavior

Comments

@OlliL
Copy link

OlliL commented May 9, 2024

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?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

No response

Demo link

Code of Conduct

@logaretm
Copy link
Owner

logaretm commented May 9, 2024

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
Copy link
Author

OlliL commented May 9, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Unintended behavior
Projects
None yet
Development

No branches or pull requests

2 participants