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

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

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

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”成数组以进行测试。这可能比尝试创建单独的视图模型更容易。

淘汰验证组错误检查

1 个答案: