0👍
✅
Have a read of the documentation for cross field validation. Essentially the steps are
- Wrap the fields within the same
ValidationObserver
component. - Give each field a name property
- Reference the target field name or vid value in the rules of the other.
For your code:
<template>
<v-app>
<ValidationObserver ref="form" v-slot="{ invalid, validated, passes, validate }">
<form>
<ValidationProvider rules="required|min:6" v-slot="{ errors, valid }" name='password'>
<v-text-field
v-model="current_password"
label="Current Password"
type="password"
:success="valid"
:error-messages="errors"
/>
</ValidationProvider>
<ValidationProvider rules="required|distinct:@password" v-slot="{ errors, valid }" name='new password'>
<v-text-field
v-model="new_password"
label="New Password"
type="password"
:success="valid"
:error-messages="errors"
/>
</ValidationProvider>
</form>
</ValidationObserver>
</v-app>
</template>
<script>
import { ValidationObserver, ValidationProvider, Extend } from "vee-validate";
extend('distinct', {
params: ['target'],
validate(value, { target }) {
return value !== target;
},
message: 'Fields can not be the same'
});
export default {
data() {
return {
current_password: "",
new_password: "",
};
},
components: {
ValidationObserver,
ValidationProvider
},
};
</script>
Source:stackexchange.com