25

我有一个表单,它同时使用jQuery ValidateMasked Input来输入电话号码和美国邮政编码字段。

例如,对于美国邮政编码,Masked Input 只允许输入数字,并强制使用“99999”或“99999-9999”格式(其中 9 可以是任何数字)。验证规则要求相同。但在某些情况下,Validate 将字段标记为无效,而实际上它应该是有效的。

代码细节

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

我使用 Masked Input 应用的掩码是.mask('99999?-9999')

重现步骤

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

  • 填写无效的邮政编码(例如,三位数字)
  • 远离田野。Masked Input 擦除输入(预期行为),jQuery Validate 将其标记为无效,因为它是空白的(也是预期的)。
  • 返回 zip 字段并填写有效的5 位数zip。
  • 远离田野。它仍然被标记为无效。这是意料之外的

如果我填写 9 位 zip,则不会发生此问题。

假设

我认为这个错误是因为在 5 位 zip 的情况下,Masked Input 临时插入了“-____”以向用户显示他们可以选择输入一个破折号和另外四位数字。这在模糊时被删除,但在被删除之前,该字段已验证并失败,因为不允许使用下划线。

这一假设得到了以下事实的支持:如果表单随后重新验证,则 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每次加载表单部分时都必须运行该版本。

4

7 回答 7

11

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

$("[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 插件 on 验证blur,但相同的元素由focusout在 maskedinput 的模糊之前调用的事件(它是非 ie 浏览器上模糊的包装器)验证器插件验证。

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

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

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

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

真挚地

于 2012-03-14T09:14:38.743 回答
10

我实际上是在寻找这个确切问题的答案。最终找到了一个更可靠的解决方法。

由于我正在为邮政编码定义自己的验证器方法,因此我对其进行了修改,以便在我从值中删除占位符后,如果邮政编码的长度为 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 个数字(包括连字符在内的 6 个),我正在验证的邮政编码将由输入插件添加占位符,并删除连字符。所以它会正确地验证它。

于 2011-02-02T00:27:56.270 回答
7

只需连接到 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;
}
于 2012-12-05T21:10:08.500 回答
5

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

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

我将掩码声明更改为.mask('9?99',{placeholder:''});...不再有冲突。:)

在您的情况下可能存在问题,因为-邮政编码始终由掩码插件插入表单中。我认为您可以将正则表达式更改为^\d{5}\-$|^\d{5}\-\d{4}$(在两种情况下都匹配破折号),然后它应该验证。

无论如何,您前一阵子发布了,可能不再需要这个,但也许它会帮助其他人。:)

于 2011-08-18T22:24:06.500 回答
1

绑定的顺序是否重要?例如,两者之间是否有区别

$(function() {
  var $form = $("#myForm"), $zip = $("#zip");
  $zip.mask("99999?-9999");
  $form.validate();
});

$(function() {
  var $form = $("#myForm"), $zip = $("#zip");
  $form.validate();
  $zip.mask("99999?-9999");
});

我认为绑定应该按顺序触发。

于 2010-12-09T14:28:22.487 回答
0

我尝试了一些解决方案,但没有一个对我有用,我正在使用“bootstrapValidator”(http://bootstrapvalidator.com/)和“jquery.maskedinput”(http://digitalbush.com/projects/masked-input- plugin/)所以如果有人仍然有这个问题,我的解决方案是:

我的输入标记如下:

<input type="text" class="form-control" id="telefone" placeholder="(__) ____-_____" name="telefone" required>

完整的脚本是这样的:

$(document).ready(function() {
   var telefone = $('#telefone'), //THAT'S MY INPUT WITH MASK
       form = telefone.parents("form"), //THAT'S MY FORM WITH THE VALIDATE
       alteredField = false; //THAT'S A FLAG TO SSE IF THE INPUT WAS ALTERED

            // APPLY MY MASK
            telefone.mask('(99) 9999-9999?9');

            // FOCUS ON ANY INPUT
            form.find('input[type=text]').focus(function(){
                // REMOVE THE VALIDATION STATUS
                $(form).data('bootstrapValidator').updateStatus($(this).attr('name'), 'NOT_VALIDATED');
                // ENABLE THE SUBMIT BUTTON
                $(form).data('bootstrapValidator').disableSubmitButtons(false);
            });

            // FOCUS ON THE MASKED INPUT
            telefone.focus(function(){
                // DISABLE THE VALIDATE
                $(form).data('bootstrapValidator').enableFieldValidators('telefone', false);
                // ENABLE THE SUBMIT BUTTON
                $(form).data('bootstrapValidator').disableSubmitButtons(false);
            }).blur(function(){ // BLUR ON THE MASKED INPUT
                // GET THE INPUT VALUE
                var value = telefone.val();
                // ENABLE THE VALIDATE 
                $(form).data('bootstrapValidator').enableFieldValidators('telefone', true);
                // CHECK IF THE VALUE IS EMPTY
                if(value != ""){
                    // CHANGE THE STATUS OF THE INPUT TO VALID 
                    $(form).data('bootstrapValidator').updateStatus('telefone', 'VALID')
                    // ACTIVE THE FLAG
                    alteredField = true;
                }else if (alteredField) { // IF THE INPUT WAS ALTERED BEFORE AND DON'T HAVE VALUE
                    // CHANGE THE STATUS OF THE INPUT TO INVALID
                    $(form).data('bootstrapValidator').updateStatus('telefone', 'INVALID')
                };
            });

        });

此代码修改了“bootstrapValidator”的标准行为,但这是我必须解决该错误的唯一方法。

我不知道性能问题,所以请修改和改进代码^^希望对您有所帮助^_^

于 2014-11-12T20:35:29.530 回答
0

我遇到了同样的问题,我花了两个小时来做​​出正确的解决方案。最后,我做了一个适当的代码。你可以使用它

对于邮政编码。

$.validator.addMethod("zipcode", function(postalcode, element) {
            //removes placeholder from string
            postalcode = postalcode.replace(/[^0-9]/g, "");
            //validates postalcode.
            return this.optional(element) || postalcode.match(/^\d{5}$|^\d{5}\-\d{4}$/);
        }, "Please specify a valid zip code");

如果您想增加或减少 zip 长度,请更改 postalcode.match(/^\d{5}$|^\d{5}-\d{4}$/); 根据您的要求编号。

对于电话,将使用相同的代码,但您只需更改诸如 postalcode.match(/^\d{10}$|^\d{10}-\d{9}$/); 之类的数字

$.validator.addMethod("phone_length", function(phoneno, element) {
                //removes all special characters
                phoneno= phoneno.replace(/[^0-9]/g, "");
                return this.optional(element) || phoneno.match(/^\d{10}$|^\d{10}\-\d{9}$/);
            }, "Please enter a valid phone");

我希望这段代码对你有很大帮助。如果您想知道如何调用,只需在验证字段中添加zipcode:true

于 2020-02-03T19:00:20.477 回答