Question

我有触发jQuery验证的按钮。如果验证失败，则按钮会变淡，以帮助引起注意力从按钮到验证消息。

$('#prev,#next').click(function (e)
{
    var qform = $('form');
    $.validator.unobtrusive.parse(qform);
    if (qform.valid())
    {
        // Do stuff then submit the form
    }
    else
    {
        $('#prev').fadeTo(500, 0.6);
        $('#next').fadeTo(500, 0.6);
    }

那部分工作正常。

但是，一旦无效条件被清除，我想解开按钮。

是否可以挂钩到jQuery Validation以获取适当的事件（无需用户单击按钮）？怎么样？

更新

根据@ Darin的回答，我用jquery-validation项目打开了以下票证

https://github.com/jzaefferer/jquery-validation/issues/459

Answer 1

听起来很奇怪，但jQuery.validate插件没有全局成功处理程序。它确实有一个成功处理程序，但是这个是基于每个字段调用的。看一下following thread，它允许你修改插件并添加这样的处理程序。所以这是插件在修改后的样子：

numberOfInvalids: function () {
    /* 
    * Modification starts here...
    * Nirmal R Poudyal aka nicholasnet
    */
    if (this.objectLength(this.invalid) === 0) {
        if (this.validTrack === false) {
            if (this.settings.validHandler) {
                this.settings.validHandler();
            }
            this.validTrack = true;
        } else {
            this.validTrack = false;
        }
    }
    //End of modification 

    return this.objectLength(this.invalid);
},

现在订阅此事件的代码很简单：

$(function () {
    $('form').data('validator').settings.validHandler = function () {
        // the form is valid => do your fade ins here
    };
});

顺便说一下，我看到您正在调用$.validator.unobtrusive.parse(qform);方法，该方法可能会覆盖附加到表单的validator数据并终止我们订阅的validHandler。在这种情况下，在调用.parse方法之后，您可能还需要重新附加validHandler（我没有测试它，但我觉得可能是必要的。）

Answer 2

我遇到了类似的问题。如果你像我一样犹豫要改变源代码，另一个选择就是挂钩jQuery.fn.addClass方法。只要成功验证，jQuery Validate就会使用该方法将类“valid”添加到元素中。

(function () {
    var originalAddClass = jQuery.fn.addClass;
    jQuery.fn.addClass = function () {        
        var result = originalAddClass.apply(this, arguments);
        if (arguments[0] == "valid") {
            // Check if form is valid, and if it is fade in buttons.
            // this contains the element validated.
        }
        return result;
    };
})();

我发现了一个更好的解决方案，但我不确定它是否适用于您的场景，因为如果不显眼的变体可以使用相同的选项，我现在不会。但这就是我最终用标准变体做到的。

$("#form").validate({
    unhighlight: function (element) {
        // Check if form is valid, and if it is fade in buttons.
    }
});

更正验证错误时的jQuery事件

2 个答案: