淘汰赛验证组错误检查

Question

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

我在官方 github 页面上找到了this，我正在尝试这样做。

当我这样做时，没有检测到错误。继续第二部

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

这将验证 person 的所有属性及其“子”属性以确保验证。

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

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

这将允许你将你的 observables 'chunk' 成数组来进行测试。这可能比尝试创建单独的视图模型更容易。