jQuery验证和屏蔽输入之间的冲突 [英] Conflict between jQuery Validate and Masked Input

问题描述

我有一个同时使用 jQuery Validate 和

I've got a form that's using both jQuery Validate and Masked Input for phone number and US zip code fields.

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

For example, for a US zip code, Masked Input allows only numbers to be entered, and forces either the format "99999" or "99999-9999" (where 9 can be any number). The Validate rule requires the same. But in some cases, Validate marks a field as invalid when it should actually be valid.

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

The regex that jQuery Validate is using on the zip code field is ^\d{5}$|^\d{5}\-\d{4}$.

我通过Masked Input应用的Mask是.mask('99999?-9999')

The mask I'm applying with Masked Input is .mask('99999?-9999')

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

A conflict between them is produced when I do the following:

• 填写无效的邮政编码(例如三位数)
• 远离田野的地方.屏蔽的输入会擦除输入(预期的行为)，并且jQuery Validate将其标记为无效，因为它为空(也是预期的).
• 返回zip字段并填写有效的 5位数字邮政编码.
• 远离田野的地方. 它仍被标记为无效.这是意外的.

• Fill out an invalid zip code (say, three digits)
• Tab away from the field. Masked Input erases the input (expected behavior) and jQuery Validate marks it as invalid because it's blank (also expected).
• Go back to the zip field and fill in a valid 5-digit zip.
• Tab away from the field. It is still marked as invalid. This is unexpected.

如果我填写9位数的邮政编码，不会不会发生此问题.

This problem does not happen if I fill out a 9-digit zip.

我认为此错误是因为对于5位数的zip，屏蔽的输入"已临时插入"-____"以向用户显示他们可以选择输入破折号和另外四个数字.该内容会在模糊时被删除，但是在删除之前，该字段会经过验证并失败，因为不允许使用下划线.

I think this error is because in the case of the 5-digit zip, Masked Input has temporarily inserted "-____" to show the user that they can optionally enter a dash and four more digits. This is removed on blur, but before it's removed, the field is validated and fails, since underscores aren't permitted.

这一假设得到了以下事实的支持:如果随后重新验证了表单，则zip字段将通过.我已经做到了两种方式:

This hypothesis is supported by the fact that, if the form is subsequently re-validated, the zip field will pass. I have done this two ways:

• 提交表格；单击提交"按钮，通过zip字段并提交表单后，所有字段都将重新验证.

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

• By submitting the form; all fields are re-validated when the submit button is clicked, the zip field passes, and the form submits.

• By setting up a blur event that re-validates that specific field. For example:

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

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

这可以作为一个骇人听闻的解决方案，但并不十分令人满意，因为1)默认设置已经在模糊时重新验证，因此这是重复的，并且2)它需要其他代码除了正常的验证规则.

This can serve as a hacky solution, but isn't very satisfactory, because 1) the default settings already re-validate on blur, so this is repetitive, and 2) it requires additional code besides the normal Validate rules.

还有其他人遇到这个问题吗? 与设置其他模糊事件监听器相比，您有更优雅的解决方案吗?

Has anybody else run into this issue? Do you have a more elegant solution than setting up an additional blur event listener?

即使应用上面的hacky解决方案也不如我所愿.例如，这不起作用:

Even applying the hacky solution above doesn't work as nicely as I'd like. For instance, this doesn't work:

$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版本.

Since these elements are loaded by AJAX, the .each version has to be run each time a form section is loaded.

推荐答案

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

I was actually looking for an answer to this exact question. Ended up figuring out a more reliable workaround.

由于我正在为邮政编码定义自己的验证器方法，因此我对其进行了修改，以便在从值中删除占位符后，如果邮政编码的长度为6，它将删除连字符.

Since I am defining my own validator method for the zipcode I modified it so that it would remove the hyphen if the length of the zipcode was 6 after I removed the placeholder from the value.

它看起来像这样:

$.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个数字)，那么我正在验证的邮政编码将由输入插件添加占位符，并删除连字符.因此它将正确验证它.

So the postalcode I am validating will have the placeholders added by the input plugin and the hyphen removed if the zipcode that is entered only has 5 numerical digits (6 including the hyphen). So it will validate it properly.

这篇关于jQuery验证和屏蔽输入之间的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！