淘汰赛验证和Qtip

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使用相同类型的回调方法 - 验证绑定.

Answer 1

我没有特别使用Knockout-Validation,但我在过去写过类似的东西.快速浏览一下源表明每个扩展的observable都有一个子可观察的 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");
                 }
           });
       }
    }
};