javascript - 消息显示之外的 knockout validation

Question

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

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

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

Answer 1

我最近也有同样的需求，所以我会尝试根据您上面提供的代码行翻译我所做的...

尝试添加类似于以下的 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);
    });
};

/更新

更新2根据@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 为真时才需要调用该函数(处理当前可观察对象是将 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 和/或其他一些方法。

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