Hoping I've provided enough info : Using the below links is anyone able to reproduce making Cross Field Validation form into one field that has a customer Your code must be 4 digits. & no error once 4 digit pin is entered (only any 4 numbers eg.(1234),(0000),(9999) (not any other characters))
https://codesandbox.io/s/s023f
https://vee-validate.logaretm.com/v3/advanced/rules-object-expression.html#cross-field-validation
Below is my Attempt with import { extend } from "vee-validate"; example using regex /^\d{4}$/ on equalFourDigits but I'm still seeing the custom message when 4 numbers are entered - I want to keep the custom message.
<script>
import { extend } from "vee-validate";
extend("equalFourDigits", {
params: ["equalFourDigits"],
validate: ({ equalFourDigits }) => {
if ( equalFourDigits === /^\d{4}$/ ) {
return true;
}
return false;
},
message:
"Your code must be 4 digits. {equalFourDigits}"
});
export default {
data: () => ({
firstValue: '',
secondValue: '',
equalFourDigits: ''
})
};
</script><template>
<ValidationObserver>
<ValidationProvider :rules="{ required: true, numeric: 4, equalFourDigits: { equalFourDigits:
equalFourDigits }}" v-slot="{ errors }">
<input type="text" v-model.number="secondValue">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</ValidationObserver>
</template>maybe you can just use :rules="{required: true, digits:4}" instead?
import {digits} from 'vee-validate/dist/rules';
extend('digits', {
...digits,
message: `only four digits ...!!!!`,
})
or
extend("equalFourDigits", {
validate: (value) => {
const regex = new RegExp(/^\d{4}$/)
if (regex.test(value)) {
return true;
}
return `Your code must be 4 digits. ${value}`;
},
});