How to validate password and confirm password fileds?

[melokki]

Hello community
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?

[logaretm]

Sorry for the delay. refine won't work unless you use a form schema, because the field schema rules have no context about the other field value.

in their official example:

const passwordForm = z
  .object({
    password: z.string(),
    confirm: z.string(),
  })
  .refine((data) => data.password === data.confirm, {
    message: "Passwords don't match",
    path: ["confirm"], // path of error
  })
  .parse({ password: "asdf", confirm: "qwer" });

So passwordForm should be passed to validation-schema on either the useForm options or Form component props in order for that to work. If it doesn't work for you try to create a minimal example and I can take another look.