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');
});

Answer 2

您可以在聚焦/模糊时重新验证输入。

$('#inputId').on('blur', function(){
    $('#formId').validate().element('#inputId')
});

Answer 3

phone_no:{
    icon: 'false',
    validators: {
        notEmpty: {
            message: 'Contact Phoneno is required'
        },
        regexp: {
            regexp: /^\d{3}\-\d{3}\-\d{4}$/,
            message: 'Please Enter Valid Phone number'
        }
    }
}

在formvalidator上输入此内容并完全正常

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

3 个答案: