Question

我正在尝试在地址街道字段上使用jQuery Validation Plugin（http://jqueryvalidation.org/），人们必须确认他们的地址是否包含门牌号（有些人只是忘了写或者其他）。

Form

所以我编写了一个自定义规则并使用两个按钮扩展错误消息，如下所示：

// comes from an external file
jQuery.extend(jQuery.validator.methods, {
    containsnum: function(value, element) {
        return this.optional(element) || /^.*(\d).*$/.test(value);
    }
});
// comes from an external file
jQuery.extend(jQuery.validator.messages, {
    containsnum: "Does this address have a house number? <button id='yes' class='btn btn-mini'>yes</button> <button id='no' class='btn btn-mini'>no</button>"
});

然后是实际的验证码

$(document).ready(function() {
    var xx = $('#customer-data-form').validate({
        debug:true,     

        ignore: ":hidden",
        rules: {
            Anschrift: {
                containsnum:true
            }
        }
    });
    /* check for house number */
    $(document).on('click',"#no",function(e){
        console.log('no')
        e.preventDefault();
        $('#Anschrift').rules( "remove", "containsnum" );
        xx.element('#Anschrift');
    });
    $(document).on('click',"#yes",function(e){
        console.log('yes')  
        e.preventDefault();
        $('#Anschrift').focus();
    });
});

它工作得很好但在某些情况下确认（和删除规则）只对第二次点击是/否按钮有效。

我已经设置了一个重复此行为的步骤。

http://jsfiddle.net/CC3zH/2/

目标是，在所有情况下首次单击确认该消息，然后我希望提示，如何将按钮与错误消息字符串分开。我已经尝试过errorPlacement等，但没有找到一个简单的解决方案而没有重写所有函数来显示错误。

感谢任何提示。

Answer 1

这是focusout和click事件如何互动的问题。如果您环顾四周，您会发现当失去焦点的元素也触发click事件时，focusout事件未正确触发是一个非常常见的问题。我们提出了许多解决方案，但适合您的解决方案是将$.on处理程序更改为mousedown上的键，而不是click，如下所示：

$('#customer-data-form').on('mousedown',"#no",function(e){
    console.log('no')
    e.preventDefault();
    $('#Anschrift').rules( "remove", "containsnum" );
    xx.element('#Anschrift');
});
$('#customer-data-form').on('mousedown',"#yes",function(e){
    console.log('yes')  
    e.preventDefault();
    $('#Anschrift').focus();
});

在这里工作： http://jsfiddle.net/ryleyb/CC3zH/3/

jQuery验证，带有包含确认的自定义错误消息

1 个答案: