淘汰验证组错误检查

Question

我有一个由两部分组成的淘汰表.当第一部分被填写时,第二部分被隐藏.完成第一部分并单击"继续"后,将隐藏第一部分,并显示第二部分.我希望能够验证第一组输入,如果没有错误,则继续下一部分.

我在官方的github页面上找到了这个,我正在尝试这样做.

当我这样做时,没有检测到错误.它继续到第二部分

function ReserveViewModel(){

    self.firstName = ko.observable("").extend({ required: true });

    self.continue = function(){
        var errors = ko.validation.group([ReserveViewModel.firstName]);
        if (errors.length == 0) {
            //display  second div
        }
        else{
             self.errors.showAllMessages();
        }
    }
}

但是,如果我这样做它可以工作,但试图验证一切.由于第二组输入是空的,它只是挂在那里.

self.continue = function(){
    self.errors = ko.validation.group(self);
    if (self.errors().length == 0) {

    }
    else{
        self.errors.showAllMessages();
    }
}

Answer 1

您的代码无法正常工作的一些基本原因.在第一个示例中,您已经在视图模型的上下文中,因此您不需要使用ReserveViewModel.firstName,而在第二个示例中,您要检查"self"中的所有内容,即检查我内部的所有内容验证.有两种方法可以轻松地对这只猫进行皮肤处理(正如我所看到的,只是简单地使用了KO.Validation) -

深度验证 -

function Person(firstname, lastname) {
    var firstName = ko.observable(firstname).extend({ required: true });
    var lastName = ko.observable(lastname).extend({ required: true });
}

function ReserveViewModel(){

    self.person = ko.observable(new Person('John', 'Jingleheimer'));

    self.continue = function(){
        var errors = ko.validation.group(self.person, { deep: true });
        if (errors.length == 0) {
            //display  second div
        }
        else{
             self.errors.showAllMessages();
        }
    }
}

这将验证人员的所有属性及其"子"属性,以确保验证.

下一个例子是简单地创建一个要检查的对象数组 -

function myViewModel() {
    var self = this;
    self.firstName = ko.observable().extend({ required: true });
    self.lastName = ko.observable().extend({ required: true });
    self.someOtherProperty = ko.observable().extend({ required: true });

    var firstStepValidation = [
        self.firstName,
        self.lastName
    ];

    var secondStepValidation = [
        self.someOtherProperty
    ];

    self.continue = function(){
        var errors = ko.validation.group(firstStepValidation);
        if (errors.length == 0) {
            //display  second div
        }
        else{
             self.errors.showAllMessages();
        }
    }
}

这将允许您将您的observable"chunk"成数组以进行测试.这可能比尝试创建单独的视图模型更容易.