jQuery验证与占位符Polyfill不兼容吗? [IE9错误] [英] Jquery Validate Incompatible with Placeholder Polyfill? [IE9 Bug]
问题描述
我目前正在将 Mathias Bynens的占位符Polyfill与 jquery.validate插件(v1.11.1),并且使用 Internet Explorer 9 遇到了令人沮丧的错误.
I'm currently using the Placeholder Polyfill by Mathias Bynens in combination with the jquery.validate plugin (v1.11.1) and am running into a frustrating error with Internet Explorer 9.
如果我的type="password"
字段定义了非空的placeholder
属性,则无法获得必填字段的验证,以对我的type="password"
字段起作用.输入一个值并且占位符文本消失后,其余的验证就可以正常工作.
I cannot get required field validation to work on my type="password"
fields if they have a non-empty placeholder
attribute defined. Once a value is input and the placeholder text disappears, the remaining validation works fine.
JS
$('input').placeholder(); // init placeholder plugin
signupFormValidator = $('form').validate(); // init validation
HTML
<form>
<input class="required" type="text" name="test" id="test" placeholder="test"><br>
<input class="required" type="password" name="password" id="password" placeholder="password"><br>
<input class="required" type="password" name="confirm" id="confirm" placeholder="confirm"><br>
<input type="submit">
</form>
推荐答案
编辑:此修复程序引入了Firefox中的错误.请参阅下面的评论.
edit: this fix introduces bugs in Firefox. Please see comment below.
为了解决这个问题,我最终使用了一些我自己烤的相当笨拙的jQuery:
To deal with this, I ended up using some fairly hacky jQuery I baked myself:
$('#password, #confirm').keyup(function() {
var $input = $(this);
if ($input.attr('type') === 'text') {
if ($input.val().length > 0) {
$input.attr('type', 'password');
}
} else if ($input.val() === "") {
$input.attr('type', 'text');
}
});
这是在将字段type
设置为文本"而不是密码",从而有效地解决了令人讨厌的占位符问题.
What this is doing, is setting the field type
to "text" rather than "password", effectively clearing up that pesky placeholder issue.
次要问题:在开始向输入中输入文本时,密码的第一个字符会短暂显示为纯文本.
Minor issue: the first character of the password displays as plain-text briefly when starting to enter text into the input.
这篇关于jQuery验证与占位符Polyfill不兼容吗? [IE9错误]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!