javascript - knockout validation 和 Qtip

Question

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

目前每个 viewModel 都有自己的自定义方法来设置和启动验证和回调，但是我试图寻找一种更好的方法来执行此操作，添加自定义绑定(bind)以通过数据设置我的验证规则-绑定(bind)或替代方式，但仍会产生相同的结果(即当发生验证错误时触发 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, });
    };
}

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

Answer 1

我没有具体使用过 Knockout-Validation，但我过去写过类似的东西。快速浏览一下源代码就会发现，每个扩展的可观察对象都有一个子可观察对象 isValid。这可用于使用传统的 knockout 可见绑定(bind)在您的标记中隐藏显示消息。

要让 QTip 工作，自定义绑定(bind)可以订阅此 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");
                 }
           });
       }
    }
};