首页 文章

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

提问于
浏览
6

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

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

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

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

我尝试过使用正则表达式验证器 . 它接近,但是再次,因为它在被屏蔽的输入插件清理了字段之前触发它不应该显示错误(尽管当用户尝试提交表单时错误消失) .

我也试过这个:

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

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

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

3 回答

  • 7

    Hiya working demo 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');
    });
    
    ​
    
  • 2

    您可以重新验证聚焦/模糊的输入 .

    $('#inputId').on('blur', function(){
        $('#formId').validate().element('#inputId')
    });
    
  • 1
    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上输入这个并且将完美地工作

相关问题