Vue.js problems with custom validation directive

Question

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"/>

Robert · Accepted Answer · 2017-03-23 17:49:22Z

1

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
    });
}

edited Mar 23, 2017 at 17:49

Robert

3,5734 gold badges35 silver badges60 bronze badges

answered Mar 22, 2017 at 17:31

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

for some reason i had to use if (errors.errors.length > 0)

Collectives™ on Stack Overflow

Vue.js problems with custom validation directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related