Cannot get validation to work properly with Vue / Nuxt / Yup
Hi there, I'm working on a Nuxt project where I want to transition away from
vee-validate to @tanstack/vue-form and I'm struggling getting validation to work.
I have pushed all the code to a branch: https://github.com/sapphiredev/resource-webhooks/blob/feat/migrate-various-libs/components/modals/role.vue, also relevant are the files in components/forms/. The current problem I'm having is that onSubmitInvalid never triggers, and the disabled state for the submit button (form.state.isSubmitting || !form.state.isValid) isn't getting toggled correctly. It's like validation is not running at all.
The current production version of this project is: https://webhooks.sapphirejs.dev/configure/roles, as can be seen there the flow should be:
1. When clicking "Add new role" both fields are empty without errors and "Add role" is disabled
2. When typing text in the "Role name" field an error shows up until it is valid (length between 3 and 50 characters)
3. Same for Snowflake, matching the regex /^(?<id>\d{17,20})$/ and unique
4. If both fields are valid the submit button gets enabled and clickable and the info can be saved.
I suspect my issue is something silly and I'm just missing some configuration somewhere but for the life of me I cannot find what it is.0 Replies