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?