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

<强> / 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函数，并且仅在验证的observable有效时才需要调用，但formIsNotValid为真（以处理当前可观察的情况是将formIsNotValid设置为true的那个。

以下是我如何做到这一点的一个例子：

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

愚蠢格式化以消除水平滚动

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

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

欢迎来自任何人的进一步提示！

<强> / UPDATE2

一旦你有了这个，禁用按钮是一个绑定到formIsNotValid计算的observable的问题，无论你打算如何禁用按钮，例如， css: { 'ui-state-disabled': formIsNotValid }和/或disable: formIsNotValid和/或其他一些方法。

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

Answer 2

我会设置以下内容：

saveEnabled = ko.computed(function(){
    // possible other logic
    return shippingMethodModel.Description.isValid();
});

然后在你的HTML中：

<button data-bind="enable: saveEnabled"> Save </button>

或者，如果您的模型上有多个属性，则可以执行以下操作：

ko.validation.group(shippingMethodModel);

然后在你的HTML中：

<button data-bind="enable: isValid"> Save </button>

group函数将isValid属性添加到它所分组的任何内容。

消息显示之外的淘汰验证

2 个答案: