javascript - 消息显示之外的 knockout 验证

我正在研究KnockOut验证，到目前为止一切顺利。我确实有一个问题。我有一些类似以下的代码:

 shippingMethodModel.Description.extend({ required: true });

并在下面显示一条验证消息，但它是否设置了标志或可以读取以禁用保存按钮的内容？

最佳答案

我最近有同样的需求，因此我将根据您在上面提供的代码行尝试翻译我所做的事情。

尝试添加类似于以下内容的ko.computed observable:

shippingMethodModel.formIsNotValid = ko.computed(function () {
    // original line
    // var errors = ko.utils.unwrapObservable(ko.validation.group(self));

    // ** oops, not "self" in this case

    // UPDATED line
    var errors = ko.utils.unwrapObservable(ko.validation.group(shippingMethodModel));
    return (errors.length > 0);
});

更新
注意到错误后，我在上面的代码中进行了更正。

对于那些一次将此类模型/类都声明为函数的用户，此代码可能类似于以下内容:

var ShippingMethodModel = function () {
    var self = this;
    self.shippingMethodId = ko.observable().extend({ required: true });
    self.description = ko.observable().extend({ required: true });

    self.formIsNotValid = ko.computed(function () {
        var errors = ko.utils.unwrapObservable(ko.validation.group(self));
        return (errors.length > 0);
    });
};

/UPDATE

UPDATE2
基于@ericb在下面的注释中的输入，我对实现自己的解决方案的方式进行了更改，下面将通过修改上面的更新中的示例代码来演示该解决方案:

var ShippingMethodModel = function () {
    var self = this;
    self.shippingMethodId = ko.observable().extend({ required: true });
    self.description = ko.observable().extend({ required: true });

    self.formIsNotValid = ko.observable(false);

    self.validateObservableFormField = function (nameOfObservableToValidate,
                                                 data, event) {
        for (var prop in data) {
            if (prop === nameOfObservableToValidate) {
                var theObservable = data[prop];
                theObservable.valueHasMutated();
                ko.validation.validateObservable(theObservable);
                if (theObservable.error) {
                    self.formIsNotValid(true);
                }
                else {
                    if (self.formIsNotValid()) {
                        var errors =
                            ko.utils.unwrapObservable(ko.validation.group(self));
                        self.formIsNotValid(errors.length > 0);
                    }
                }
                return;
            }
        }
    };
};

请注意，我现在已经将formIsNotValid定义为可观察的，但是我正在使用validateObservableFormField函数来帮助我确定提交前的表单有效性。此更改确保仅在需要时才调用ko.validation.group函数，并且仅在验证的可观察对象有效但formIsNotValid为true时才需要调用(以处理当前可观察对象是将formIsNotValid设置为true的情况。 )。

这是我如何执行此操作的示例:

<input data-bind="value: description,
                  event: { blur: function(data, event) {
                                     validateObservableFormField('facilityName',
                                                                  data,
                                                                  event)
                                 }
                         }" />

高飞格式，以消除水平滚动

注意:我已经在使用此技术，但是我对其进行了调整，以提高检查表单是否有效的性能。 @Californicated ，我在最后发表评论后意识到，从已验证的表单字段的模糊事件调用此函数是为什么我看到保存/提交按钮在启用和禁用状态之间切换的原因。

再次感谢@ericb提供的性能提示。

随时欢迎其他任何人提出更多建议!

/UPDATE2

一旦设置好，禁用按钮就是绑定(bind)到可观察到的formIsNotValid的问题，无论您打算如何禁用该按钮，该方式都是有意义的，例如css: { 'ui-state-disabled': formIsNotValid }和/或disable: formIsNotValid和/或其他一些方法。

希望这会有所帮助，如果遇到麻烦，请告诉我。