jQuery Validate和Masked Input之间的冲突

Question

我有一个表格,它同时使用jQuery Validate和Masked Input作为电话号码和美国邮政编码字段.

例如,对于美国邮政编码,屏蔽输入仅允许输入数字,并强制格式为"99999"或"99999-9999"(其中9可以是任意数字).验证规则要求相同.但在某些情况下,Validate会在某个字段实际有效时将其标记为无效.

代码细节

jQuery Validate在邮政编码字段中使用的正则表达式是^\d{5}$|^\d{5}\-\d{4}$.

我正在使用蒙面输入的面具是 .mask('99999?-9999')

重现步骤

当我执行以下操作时,会产生它们之间的冲突:

• 填写无效的邮政编码(比方说,三位数)
• 远离田野.Masked Input删除输入(预期行为),jQuery Validate将其标记为无效,因为它是空白的(也是预期的).
• 返回邮政编码区并填写有效的5位数邮政编码.
• 远离田野.它仍被标记为无效.这是出乎意料的.

如果我填写一个9位数的邮编,则不会发生此问题.

假设

我认为这个错误是因为在5位数字拉链的情况下,Masked Input暂时插入"-____"以向用户显示他们可以选择输入短划线和另外4位数字.这在模糊时被删除,但在删除之前,该字段已经过验证并失败,因为不允许使用下划线.

这个假设得到以下事实的支持:如果随后重新验证表单,则zip字段将通过.我这样做了两个方面:

• 提交表格; 单击提交按钮,zip字段通过,表单提交时,将重新验证所有字段.

• 通过设置blur重新验证该特定字段的事件.例如:

  $("#zipcode").blur(function(){$(this).closest('form').validate().element($(this));});

这可以作为一个hacky解决方案,但不是很令人满意,因为1)默认设置已经重新验证模糊,所以这是重复的,2)它需要除常规验证规则之外的其他代码.

还有其他人遇到过这个问题吗？您是否拥有比设置其他模糊事件监听器更优雅的解决方案？

更新:应用hacky解决方案

即使应用上面的hacky解决方案也不如我想的那样好.例如,这不起作用:

$appDiv.delegate('input,select,textarea','blur',function(){
  $(this).closest('form').validate().element($(this));
});

......也不是这样的:

$('input,select,textarea').live('blur',function(){
  $(this).closest('form').validate().element($(this));
});

......但是这样做:

$('input,select,textarea').each(function(){
  $(this).blur(function(){
    $(this).closest('form').validate().element($(this));
  });
});

由于这些元素是由AJAX加载的,因此.each每次加载表单部分时都必须运行该版本.

Answer 1

我尝试了以下解决方案,它就像一个魅力.

$("[data-input-type=phone]", "body")
  .mask("(999) 999 99 99")
  .bind("blur", function () {
    // force revalidate on blur.

    var frm = $(this).parents("form");
    // if form has a validator
    if ($.data( frm[0], 'validator' )) {
      var validator = $(this).parents("form").validate();
      validator.settings.onfocusout.apply(validator, [this]);
    }
  });

引发问题的是事件排序.当一个元素被屏蔽时,它会被maskedinput插件验证blur,但是相同的元素由focusout事件上的验证器插件验证(在非ie浏览器上是模糊的包装器),它在maskedinput的模糊之前调用.

在这种情况下,输入元素具有"(___) ___ __ __"验证器检查值时的值.当代码达到maskedinput的blur事件时,插件会测试并清除该值,因为它不是有效的输入.

每个验证案例的验证结果可能不同.例如,required规则将成功传递,因为element具有值.number即使我们将输入留空,因此非必需字段也会失败,因为类似的掩码"999"可能会被测试为12_

上面的代码测试屏蔽输入的形式是否附加了验证,并调用focusout事件处理程序.由于我们的处理程序是最新的附加,希望它最后会被调用.

警告,代码只是复制验证插件的行为.它可能会工作十年,但如果验证插件决定做的事情与现在不同,可能会失败.

诚挚

Answer 2

我实际上是在寻找这个确切问题的答案.结束了找出更可靠的解决方法.

因为我正在为zipcode定义我自己的验证器方法,所以我修改了它,以便在我从值中删除占位符后,如果zipcode的长度为6,它将删除连字符.

它看起来像这样:

$.validator.addMethod("zipcode", function(postalcode, element) {
            //removes placeholder from string
            postalcode = postalcode.split("_").join("");

            //Checks the length of the zipcode now that placeholder characters are removed.
            if (postalcode.length === 6) {
                //Removes hyphen
                postalcode = postalcode.replace("-", "");
            }
            //validates postalcode.
            return this.optional(element) || postalcode.match(/^\d{5}$|^\d{5}\-\d{4}$/);
        }, "Please specify a valid zip code");

因此,我验证的邮政编码将通过输入插件添加占位符,并且如果输入的邮政编码仅包含5位数字(包括连字符),则删除连字符.所以它会正确验证它.

Answer 3

只需挂钩mask()函数并添加一些额外的逻辑,在默认掩码的模糊逻辑后触发自己的模糊逻辑:

//Store the original mask function
var origMaskFn = $.fn.mask;

$.fn.mask = function (mask, settings) {

    //Call the original function applying the default settings
    origMaskFn.apply(this, [mask, settings]);

    //Manually validate our element on blur to prevent unobtrusive messages
    //from showing before the mask is properly scrubbed
    $(this).bind('blur', function () {
        var $form = $(this).parents('form');
        if (!$form.exists())
            return;

        var validator = $form.validate().element($(this));
    });
}

此外,您可能会注意到'exists()'函数.这是我在jQuery选择器中使用的很多东西:

//Function to detect if a jQuery elements exists.  i.e.:
//      var $element = $(selector);
//      if($element.exists()) do something...

$.fn.exists = function () {
    return this.length !== 0;
}

Answer 4

我有一个类似的问题,并设法解决它将默认占位符字符更改为空字符串.

我正在使用a .mask('9?99');并且使用简单的"数字"规则进行验证,并且遇到了同样的冲突.

我将掩码声明更改为.mask('9?99',{placeholder:''});......并且没有更多冲突.:)

在您的情况下可能存在问题,因为-邮政编码中的邮政编码总是插入表单中.我认为您可以将正则表达式更改为^\d{5}\-$|^\d{5}\-\d{4}$(在两种情况下匹配短划线),然后它应该验证.

无论如何,你刚刚发布了,可能不再需要这个了,但也许它会帮助别人.:)