我有一个表单,它同时使用jQuery Validate和Masked 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
每次加载表单部分时都必须运行该版本。