javascript - Knockoutjs Validation for areSame or mustMatch examples - Stack Overflow

admin管理员组

文章数量:1290946

I am trying to use the Knockoutjs Validation add on from GitHub. Most of it seems to work just fine but when I try to use the extended validation mustEqual(password/confirm password) it does not seem to do anything. What am I missing?

I would very much like to learn this extender technique for future use.

(also this whole html and javascript get loaded to the page via AJAX call. if that has anything to do with it.)

My javascript

    function UserAccount(data) {
        var self = this;
        self.Password = ko.observable(data.Password).extend({ required: true, minlength: 6, message: "Password is required", maxLength: 12 });

        self.Firstname = ko.observable(data.Firstname).extend({ required: true, minlength: 6, message: "Firstname is required", maxLength: 40 });
        self.Lastname = ko.observable(data.Lastname).extend({ required: true, minlength: 6, message: "Lastname is required", maxLength: 40 });
        self.Email = ko.observable(data.Email).extend({ required: true, minlength: 6, message: "Email is required", email: true, maxLength: 90 });
        self.ConfirmPassword = ko.observable().extend({ mustEqual: self.Password()});
        ...........................Other Code............
        }

    ko.validation.rules['mustEqual'] = {
        validator: function (val, otherVal) {
            alert("Hello");
            return val === otherVal;
        },
        message: 'The field must equal {0}'
    };
    $(document).ready(function () {


        ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0));
        ko.validation.registerExtenders();

    });

I am trying to use the Knockoutjs Validation add on from GitHub. Most of it seems to work just fine but when I try to use the extended validation mustEqual(password/confirm password) it does not seem to do anything. What am I missing?

I would very much like to learn this extender technique for future use.

(also this whole html and javascript get loaded to the page via AJAX call. if that has anything to do with it.)

My javascript

    function UserAccount(data) {
        var self = this;
        self.Password = ko.observable(data.Password).extend({ required: true, minlength: 6, message: "Password is required", maxLength: 12 });

        self.Firstname = ko.observable(data.Firstname).extend({ required: true, minlength: 6, message: "Firstname is required", maxLength: 40 });
        self.Lastname = ko.observable(data.Lastname).extend({ required: true, minlength: 6, message: "Lastname is required", maxLength: 40 });
        self.Email = ko.observable(data.Email).extend({ required: true, minlength: 6, message: "Email is required", email: true, maxLength: 90 });
        self.ConfirmPassword = ko.observable().extend({ mustEqual: self.Password()});
        ...........................Other Code............
        }

    ko.validation.rules['mustEqual'] = {
        validator: function (val, otherVal) {
            alert("Hello");
            return val === otherVal;
        },
        message: 'The field must equal {0}'
    };
    $(document).ready(function () {


        ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0));
        ko.validation.registerExtenders();

    });

• javascript
• jquery
• knockout.js

Share Improve this question Follow asked Sep 23, 2013 at 17:54 DanScanDanScan 90122 gold badges1010 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Your custom validator code is OK. But you are not calling correctly the ko.validation.registerExtenders(); method.

Although it is not explicitly stated but you need to call ko.validation.registerExtenders(); before you are calling ko.applyBindings.

So to fix your code you just need to write:

$(document).ready(function () {
    ko.validation.registerExtenders();
    ko.applyBindings(new UserAccount(initdata), $("#UserAccount").get(0));
});

But you will face another problem: the mustEqual validator is for paring to static values so it won't work if you want to pare two properties like password with confirm password.

What you need is something like the user contributed "Are Same" validator:

ko.validation.rules['areSame'] = {
    getValue: function (o) {
        return (typeof o === 'function' ? o() : o);
    },
    validator: function (val, otherField) {
        return val === this.getValue(otherField);
    },
    message: 'The fields must have the same value'
};

What you can use like:

self.Password = ko.observable(data.Password).extend({
    required: true,
    minlength: 6,
    message: "Password is required",
    maxLength: 12
});
self.ConfirmPassword = ko.observable().extend({
    areSame: self.Password
});

Demo JSFiddle.

本文标签： javascriptKnockoutjs Validation for areSame or mustMatch examplesStack Overflow