Question

我目前使用Jquery Validation和Qtip来处理实际验证并使用验证错误的错误工具提示样式通知使用验证选项的errorPlacement组件在屏幕上显示信息。

目前每个viewModel都有自己的自定义方法来设置和启动验证和回调，但是我试图找到一种更好的方法来做到这一点，无论是添加自定义绑定来通过数据设置我的验证规则 - 绑定或替代方法，但仍然产生相同的结果（即，当发生验证错误时触发errorPlacement并告诉Qtip显示给定元素的错误）。

在我开始自己制作之前，我刚刚在线查看并找到Knockout Validation，我最初认为这是一个好主意，我可以将我的验证逻辑直接应用到我的viewModel中的数据，然后找到一些排序回调让Qtip启动，但似乎没有我可以找到记录的回调。图书馆似乎做了我想要的所有事情的验证方面，而不是显示方面的事情。我查看了源代码和示例但看不到除ko.validation.group（viewModel）以外的任何内容，它会给我一个包含错误的observable，但我不确定是否可以像我一样使用它期待。

以下是我当前验证的示例：

/*globals $ ko */
function SomeViewModel() {

    this.SetupValidation = function () {
        var formValidationOptions = {
            submitHandler: self.DoSomethingWhenValid,
            success: $.noop,
            errorPlacement: function (error, element) {
                if (!error.is(':empty'))
                { qtip.DoSomethingToDisplayValidationErrorForElement(element, error); }
                else
                { qtip.DoSomethingToHideValidationErrorForElement(element); }
            }
        };

        $(someForm).validate(formValidationOptions);
        this.SetupValidationRules();
    };

    this.SetupValidationRules = function() {
        $(someFormElement1).rules("add", { required: true, minlength: 6, maxlength: 20, alphaNumeric: true });
        $(someFormElement2).rules("add", { required: true, minlength: 6, maxlength: 20 });
        $(someFormElement3).rules("add", { required: true, email: true, });
    };
}

我目前确信我可以通过添加自定义绑定来删除验证规则方法的需要，因此我可以在data-bind中设置验证，但是如果可能的话我想使用相同类型的回调方法现有的Knockout-Validation绑定。

Answer 1

我没有特别使用Knockout-Validation，但我过去曾写过类似的内容。快速浏览一下来源，可以看出每个扩展的observable都有一个子可观察 isValid 。这可以用于使用传统的敲除可见绑定隐藏标记中的显示消息。

要使QTip工作，自定义绑定可以订阅此isValid属性并执行必要的初始化以在触发时显示/隐藏QTip。

修改

这是一个让你入门的例子

http://jsfiddle.net/madcapnmckay/hfcj7/

HTML：

  <input data-bind="value: emailAddress, qtipValMessage : emailAddress" />

JS：

ko.bindingHandlers.qtipValMessage = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var observable = valueAccessor(), $element = $(element); if (observable.isValid) { observable.isValid.subscribe(function(valid) { if (!valid) { $element.qtip({ overwrite: true, content: { text: observable.error } }); } else { $element.qtip("destroy"); } }); } } };

Answer 2

我一直在编辑madcapnmckay的帖子，但差异已经足够大，我认为需要一个新的答案。

它主要基于madcapnmckay的帖子，但它修复了MorganTiley指出的错误。原始仅在用户修改了observable时才有效。如果他们没有，那么代码永远不会被解雇。所以，我已经对它进行了修改，以便它在创建时触发工具提示代码，此外还有更改时。

ko.bindingHandlers.qtipValMessage = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
        if (observable.isValid) {
            var updateTooltip = function (valid) {
                if (!valid) {
                    $element.qtip({
                        overwrite: true,
                        content: {
                            text: observable.error
                        }
                    });
                } else {
                    $element.qtip("destroy");
                }
            }
            updateTooltip();
            observable.isValid.subscribe(updateTooltip);
        }
    }
};

一个缺点是在淘汰验证运行之前工具提示将在悬停时显示（例如，您在某个字段上进行了“必需”验证，在您按下提交工具提示之前将显示该字段是必需的，但是字段不会以粉色突出显示）。但是，一旦更改了字段，如果字段有效，工具提示将消失。

我的应用程序没有使用qtip，而是使用Twitter Bootstrap Tooltip，所以这里也是代码。

ko.bindingHandlers.invalidTooltip = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var observable = valueAccessor(), $element = $(element);
        if (observable.isValid) {
            var updateTooltip = function (valid) {
                if (!valid) {
                    $element.attr("data-original-title", observable.error);
                    $element.tooltip();

                } else {
                    $element.tooltip("destroy");
                }
            }
            updateTooltip();
            observable.isValid.subscribe(updateTooltip);
        }
    }
};

淘汰赛验证和Qtip

2 个答案: