基因敲除验证和Qtip

Question

目前，我将Jquery验证和Qtip结合使用来处理实际的验证，并使用验证选项的errorPlacement组件使用漂亮的工具提示样式通知来将信息显示到屏幕上。

目前，每个viewModel都有自己的自定义方法来设置和启动验证和回调，但是我正在尝试一种更好的方法来实现这一点，无论是通过数据绑定添加一个自定义绑定来设置我的验证规则，还是另一种方法，但仍然会产生相同的结果(即当验证错误发生时，errorPlacement会被触发，并告诉Qtip显示给定元素的错误)。

现在在我开始自己做一个之前，我只是在网上检查并找到了Knockout Validation，我最初认为这是一个很好的想法，我可以直接将我的验证逻辑应用于我的viewModel中的数据，然后只需找到某种回调来让Qtip生效，但是似乎没有回调，我可以找到文档。这个库似乎在验证方面做了我想做的一切，只是不是在显示方面。我查看了源代码和示例，但除了ko.validation.group(viewModel)之外没有看到任何其他东西，它将给我一个包含错误的观察值，但我不确定我是否可以按照预期的方式使用它。

以下是我的当前验证如何发生的示例：

/*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, });
    };
}

目前，我确信可以通过添加自定义绑定来消除对验证规则方法的需求，这样我就可以在数据绑定中设置验证，但是如果可能，我希望对现有的Knockout-Validation绑定使用相同的回调方法。

Answer 1

我没有特别使用Knockout-Validation，但我在过去写过类似的东西。快速浏览一下源代码就会发现，每个扩展的可观察值都有一个子可观察值isValid。这可以用来使用传统的敲除可见绑定来隐藏标记中的显示消息。

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

编辑

下面是一个帮助您入门的示例

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

HTML：

<!-- Note that you have to reference the "qtipValMessage" binding -->
<!-- using the "value" binding alone is not enough                -->
<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指出的一个错误。只有当用户修改了可观察对象时，原始版本才有效。如果他们没有，那么代码永远不会被解雇。因此，我对它进行了修改，以便在创建它时触发工具提示代码，并在它发生更改时触发它。

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

一个缺点是，在运行knockout验证之前，工具提示将显示在悬停状态(例如，您对一个字段进行了“必需”验证，在您按下submit之前，将显示一个工具提示，说明该字段是必需的，但该字段不会以粉色突出显示)。但是，一旦更改了该字段，如果该字段有效，则工具提示将消失。

我的应用程序使用的不是qtip，而是Twitter Bootstrap工具提示，所以这里也有相应的代码。

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