CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Robert
Robert

Reputation: 3553

Vue.js problems with custom validation directive

I have a custom validation directive in vue.js. Validator works fine while typing in textbox, but as soon as I call this.$validator.validateAll(), it passees validation, even it should not.

What i'm doing wrong here?

Validation code

//validiates email in database. if email is not same as initial and email is taken, it will fail validation
VeeValidate.Validator.extend('unique-email', {
    messages: {
        hr: (field, args) => {
            return "Some error message";
        }
    },
    validate: (value, args) => {
        var initialEmail = args[0];
        if (initialEmail === value) {
            return { valid: true }
        } else {
            return profileService.emailTaken(value).then((response) => {
                var emailTaken = response.data;
                return {valid:!emailTaken};
            });
        }
    }
});

Save button

 methods: {
    save: function() {
        this.$validator.validateAll().then(() => {
            //should not enter here, but it does
        });

    }
},

Html elemenent

 <input type="text" class="form-control" name="EMail" v-validate="'required|unique-email:'+ initialEmail" v-model="profile.EMail"/>

Upvotes: 1

Views: 1563

Answers (1)

Bert
Bert

Reputation: 82499

I verified the same issue. I'm not sure what the problem is. The issue appears to be discussed here, but it doesn't seem to be actually resolved.

I do have a workaround for you though. The errorBag property of $validator does appear to be set properly if there is a validation failure, so you can check it in your save method.

save: function() {
    this.$validator.validateAll().then(() => {
        const err = this.$validator.getErrors();
        if (err.errors.length > 0)
            //failed validation
        else
            //passed validation
    });
}

Upvotes: 1

Related Questions