Close

Comparing two fields with vue-validator

I was looking for a simple way to compare two fields with vue.js without much JavaScript, and came up with the following HTML and JavaScript code using vue-validator.

We use 2 fields in total. The first field must contain an ID, so we can look up the element using “document.getElementById” to find the field in our custom validator. The second field will contain our vue-validator attributes.

The JS code for vue-validator

    equals: function(val, event) {
        var element = this._el;
        var fieldIDToCompare = element.getAttribute('compareto');
        var elementToCompare = document.getElementById(fieldIDToCompare);

        if (elementToCompare && val === elementToCompare.value) {
            return true;
        } else {
            return false;
        }
    }

The HTML code

<input type="text" id="newPasswordEdit"> 
<input type="text" compareto="newPasswordEdit" v-validate:newrepeatpassword="['equals']"> 

You can have a look on this fiddle here how it works: Click here

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *