jQuery蒙面输入插件与验证插件冲突

Question

给定使用Masked Input插件屏蔽的文本框,并通过Validation Plugin将其标记为必填字段,请考虑以下事项:

如果你将焦点放在一个被屏蔽的文本框中,然后保留它而不输入任何信息(或者不输入足够的信息来满足掩码),屏蔽输入插件将删除所有内容,留下一个空文本框.

$("#phoneNumber").mask("(999) 999-9999? x999999");
$("#sampleForm").validate({
    rules: {
        phoneNumber: "required"
    }
});

验证插件似乎在屏蔽输入插件之前触发了模糊事件.这导致文本框传递验证(因为它确实包含文本),然后屏蔽输入插件启动并删除文本.一旦失去焦点,该字段应标记为无效.

我尝试过使用正则表达式验证器.它靠拢,但同样,因为它触发蒙面输入插件清理了现场之前它显示一个错误,当它不应该(虽然该错误消失,当用户试图提交表单).

我也试过这个:

$('input').bind('unmasked.maskedInput', function () { $(this).valid(); });

这有效,但它也会干扰验证器的初始行为:在按下提交按钮之前不会验证字段,然后在失去焦点时验证它们.

我已经设置了一个描述我遇到的问题的jsFiddle.

Answer 1

Hiya 工作演示 http://jsfiddle.net/2hdTn/

Cooleos所以如果我把它搞砸了蒙面插件就是删除输入因此混乱.:)

在上面的示例演示中,输入的数字将保持输入状态,您可以使用它连接验证.

哦,如果这有助于不要忘记接受答案和投票.

另见:这里还有clearEmpty: false http://view.jqueryui.com/mask/tests/visual/mask/mask.html

你可能只需要使整个面具可选,bingo它将工作:)

(如果我遗漏了什么,请告诉我)

Jquery COde

jQuery.validator.addMethod("usPhoneFormat", function (value, element) {
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
}, "Enter a valid phone number.");

$.fn.ready(function () {

    $("#sampleForm").validate({
        rules: {
            phoneNumber: "required",
            phoneNumberRegEx: {
                usPhoneFormat: true,
                required: true
            },
            phoneNumberReg: "required"
        },
        submitHandler: function (form) {
            alert("submitted.");
        }
    });
    $(".phone").mask("?(999) 999-9999 x999999");
    //alert('foo');
});

?