javascript Knockout-validation group error checking

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19393903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:25:42  来源:igfitidea点击:

Knockout-validation group error checking

javascriptjqueryknockout.jsknockout-validation

提问by user1852176

I have a knockout form that is comprised of 2 parts. When the first part is being filled out the second part is hidden. Upon completing the first part and clicking "Continue" the first part is then hidden and the second part is shown. I want to be able to validate the first set of inputs, and if there are no errors then continue to the next part.

I have a knockout form that is comprised of 2 parts. When the first part is being filled out the second part is hidden. Upon completing the first part and clicking "Continue" the first part is then hidden and the second part is shown. I want to be able to validate the first set of inputs, and if there are no errors then continue to the next part.

I found thison the official github page which I is what I'm attempting to do.

I found thison the official github page which I is what I'm attempting to do.

When I do this no errors are detected. It continues to the second part

When I do this no errors are detected. It continues to the second part

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

However, if I do this it works but tries to validate everything. Since the second set of inputs are empty it just hangs there.

However, if I do this it works but tries to validate everything. Since the second set of inputs are empty it just hangs there.

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

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

回答by PW Kad

There are a few fundamental reasons that your code isn't working. In the first example, you are already within the context of your view model so you don't need to use ReserveViewModel.firstName, and in the second you are saying to check everything within 'self' which is to say check everything within me for validation. There are two ways easy ways to skin this cat (as I see it, having only briefly worked with KO.Validation) -

There are a few fundamental reasons that your code isn't working. In the first example, you are already within the context of your view model so you don't need to use ReserveViewModel.firstName, and in the second you are saying to check everything within 'self' which is to say check everything within me for validation. There are two ways easy ways to skin this cat (as I see it, having only briefly worked with KO.Validation) -

Deep validation -

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

This will validate all of the properties of person and it's 'child' properties to ensure validation.

This will validate all of the properties of person and it's 'child' properties to ensure validation.

The next example would be to simply create an array of objects to check against -

The next example would be to simply create an array of objects to check against -

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

This will allow you to 'chunk' your observables into arrays to test against. This would probably be easier than trying to create separate view models.

This will allow you to 'chunk' your observables into arrays to test against. This would probably be easier than trying to create separate view models.