How to prevent unexpected validation in vee-validate?

Question

I've two fields: unique and unique1. Both fields are validate on blur.

unique is required.

unique1 have three rules - required, speicalRule and is_not: unique.

The problem:

When I type something in unique1 - the behavior of validator is logical. And then after I start to type something in unique - the speicalRule fires each time on change unique field.

The question:

How to prevent unexpected validation rule "speicalRule" in vee-validate?

Here is the code:

<input name="unique" data-vv-validate-on="blur" placeholder="unique" v-validate="'required'" v-model="unique">

<input name="unique1" data-vv-validate-on="blur" placeholder="unique1" v-validate="{required:true,speicalRule: true, is_not: unique }" v-model="unique1">

mounted() {
const speicalRule = function speicalRule(unique1) {
    return new Promise(function (resolve) {
     debugger;
      return resolve({
        valid: true, //this is specical for test and demonstrate the problem
        data: {
          message: 'incorrect'
        }
      })
    });
};

this.$validator.extend("speicalRule", {
    validate: speicalRule,
    getMessage: function getMessage(field, params, data) {
        return data.message;
    }
});

}

Example you can have a look at https://jsfiddle.net/e3u2br9v/

ATT ATT · Accepted Answer · 2019-08-01T13:09:47

In the unique1 field, there is a rule is_not, where you are passing the value of unique as a parameter. Now, whenever the value of unique is changed, the unique1 field is validated. Thus, all the associated rule to unique1 is verified. That's why specialRule is fired.

If this validation is unexpected, you may remove the dependency between two fields.

How to prevent unexpected validation in vee-validate?

2 Answers