Depending fields validation - cxjs

Question

I have two password fields that, among other rules, have to be equal for the form to be valid.
<form onSubmit="resetPassword">
<ValidationGroup valid-bind="$page.formvalid" >
<FlexCol>
<TextField
value-bind="$page.password1"
label="Password 1"
inputType="password"
required
validationRegExp={/(?=.*\d)(?=.*[!##$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
minLength="6"
onValidate="validatePasswordsEqual"
/>
<TextField
value-bind="$page.password2"
label="Password 2"
inputType="password"
required
validationRegExp={/(?=.*\d)(?=.*[!##$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
minLength="6"
onValidate="validatePasswordsEqual"
/>
<Button
submit
disabled-expr="!{$page.formvalid}"
text="Reset Password"
/>
</FlexCol>
</ValidationGroup>
</form>
However, the validatePasswordsEqual runs only for the currently edited field, leaving the other field always unequal. I tried using store.notify() from inside the validatePasswordsEqual, but without success.
How can I cause validation on both fields at the same time?

Answer 1

You can use the validationParams field to trigger the validation if a value in another field changes.
<TextField
value-bind="$page.password1"
label="Password 1"
inputType="password"
validationParams={{ password2: { bind: '$page.password2 }}
required
validationRegExp={/(?=.*\d)(?=.*[!##$%^&*]+)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/}
minLength="6"
onValidate="validatePasswordsEqual"
/>
The third argument provided to the onValidate callback will be the calculated value of validationParams.