jquery - 使用 jQuery Validation 根据两个不同的规则验证单个文本框会跳过第二条错误消息

Question

考虑以下 HTML:

<form id="frm">
    <input type="text" id="txt" name="txt" />
    <input type="submit" value="click me" />
</form>

我需要使用 jQuery Validation Plugin v1.13.1 和 jQuery 1.7.2 根据 2 个不同的规则验证文本框，因此:

$(function(){
    var validator = $('#frm').validate({
        errorPlacement: function (error, element) {
            element.attr('title', error.text());
        }
    });

    $.validator.addMethod('rule1', function (value, element) {
        return value != null && value.length;
    }, 'Rule 1 failed!');

    $.validator.addMethod('rule2', function (value, element) {
        return false;
    }, 'Rule 2 failed!');

    //Assign both rules to the text box.
    $('#txt').rules('add', { rule1: true, rule2: true });

    $('input[type="submit"]').click(function() {
        if(!validator.form()) {
            return false;
        }
    });
});

• 点击上面的按钮(保持文本框不变)。
• 将鼠标悬停在文本框上，显示规则 1 失败。
• 现在，在文本框中输入一些内容，以便规则 1 正确验证。
• 再次按下按钮。
• 再次将鼠标悬停在文本框上。虽然Rule1已经成功验证，但是它仍然显示Rule1失败，而不是Rule2。

问题是为什么？这是关联的 JSFiddle 。 谢谢。

Answer 1

默认情况下，jQuery 验证会尝试从元素的 title 属性中读取错误消息(如果存在)。当然，由于您设置了标题中的错误消息，因此这将成为永久性的。这种奇怪的行为is apparently deprecated现在并且很快就会消失。

但是，与此同时，解决方法是在创建验证器时使用 ignoreTitle 选项:

var validator = $('#frm').validate({
    ignoreTitle: true,
    ...
}

请参阅此处的 fiddle :http://jsfiddle.net/dp5pLr8x/4/