VeeValidate 4 How to validate password and confirm password fileds?

Viewed 17

I am trying to understand how one can validate a password and a confirm password field using vee validate and zod library.

I managed to understand how to use useField and useForm in separate components, but now I don't understand how can I validate values from two components.

For example, I have to following form and I want to validate that password field is the same with confirm-password

<!-- form file -->
<template>
    <form>
        <PasswordInput name="password" />
        <PasswordInput name="confirm-password" />
    </form>
</template>
<script setup>
const { handleSubmit } = useForm()

const onSubmit = handleSubmit((values, { resetForm }) => {
  alert(JSON.stringify(values, null, 2));
  resetForm();
});
</script
<!-- PasswordInput file -->
<template>
    <input type="password" :name="name" />
</template>
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  name: {
    type: String,
    required: true
  },
});
const validationSchema = toFieldValidator(z.string().min(1))

const nameRef = toRef(props, 'name');
const { errorMessage, value } = useField(nameRef, validationSchema);
</script>

I don't quite understand how can I do this validation I know zod has a method using the refine method, but I don't understand how can I use it in two different components

I tried to use validationSchema object in useForm, but then the form and its fields are valid by default

Do you have any tips for me?

0 Answers
Related