[v4] How to write a rule that returns the valid status of another field?

[a-kriya]

Use case

Slight variation of password and confirm password fields seen in the docs. The UX I'm looking to implement involves three rules on the confirmation field rather than the usual two:

• required
• password field being valid
• value matching password field

Without the second one, the confirmation field passes validation even if the actual password does not meet requirements. With it in place, it makes it so that the confirmation field remains invalid until a valid password and a matching confirmation is entered.

vee-validate v3

Following is the global rule definition I had in v3 that I'm looking for an alternate implementation of:

  extend('is_valid', {
    validate(_, {targetVal, targetName, rules}) {
      return validate(targetVal, rules).then(({valid}) => {
        if (valid) return true
        return targetName + ' must be valid'
      })
    },
    params: [{name: 'targetVal', isTarget: true}, 'targetName', 'rules'],
  })

The rule takes three parameters and uses the standalone validate function to determine the valid status of the target field.

And the rule object for the confirmation field:

confirmationRules: {required: true, is_valid: ['Password', 'Password', 'password'], confirmed: 'Password'}

The first parameter would be converted to the value of the password field due to isTarget: true.

vee-validate v4

I am unable to find a replacement for the validate function. All the Composition Helpers are intended to be used inside a setup function.

There are no migration notes, and I am unable to find anything related to what I'm looking to do above in the issues or discussions here. I am looking to achieve this with Options API and the Form and Field components. Thank you for any help.

[a-kriya]

To my surprise, the validate function exists in v4! It is entirely missing from the docs, or at least I was unable to find it.

Here's how I was able to define the is_valid rule in v4 using it:

defineRule('is_valid', async (_val, [targetVal, targetLabel, rules]: string[], _ctx) => {
  const {valid} = await validate(targetVal, rules, {label: targetLabel})
  return valid || targetLabel + ' must be valid'
})

Usage:

confirmationRules: {
  required: true,
  is_valid: ['@password', 'Password', 'password'],
  confirmed: '@password',
},