我在 jQuery Mobile 项目的表单中添加了 bassistance jQuery 验证。它工作完美,除了错误显示在文本输入内部而不是在文本输入下方。我知道我可以使用 errorPlacement 在输入下方使用 div 来输出错误消息,但这似乎不适用于选择菜单。
所以我有两个问题:
- 我可以做一些不同的事情来使错误消息显示在输入下方而不使用 errorPlacement 吗?
- 如果我必须使用 errorPlacement,如何才能在所选菜单中显示错误消息?
这是我的代码:
<script>
$('#page').bind('pageinit', function(event) {
$('#registrationForm').validate({
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true,
email: true,
remote: "duplicateCheck.php"
},
password: {
required: true,
minlength: 5
},
verify_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
handicap: {
required: true,
maxlength: 2,
digits: true
},
stopper: {
required: true
}
},
messages: {
firstname: {
required: "Please enter your first name."
},
lastname: {
required: "Please enter your last name."
},
email: {
required: "Please enter your email.",
email: "Please enter a valid email.",
},
password: {
required: "Please enter a password.",
minlength: "You password must be at least 5 characters long."
},
verify_password: {
required: "Please enter a password.",
minlength: "You password must be at least 5 characters long.",
equalTo: "You passwords did not match."
},
handicap: {
required: "Please enter your handicap.",
maxlength: "Your max handicap can't be higher than 99.",
digits: "Please only enter numbers."
},
stopper: {
required: "Please enter the word above."
}
},
errorPlacement: function(error, element) {
error.appendTo( element.parent().next() );
}
});
});
</script>
这是我的错误 css:
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
@media screen and (orientation: portrait){
label.error {
margin-left: 0;
display: block;
}
}
@media screen and (orientation: landscape){
label.error {
display: inline-block;
margin-left: 22%;
}
}
最佳答案
默认情况下,当将 jQuery Validate 插件与 jQuery Mobile 一起使用时,错误消息会显示在输入元素下方。正在删除自定义 errorPlacement
回调函数...
简单演示:http://jsfiddle.net/7rXnS/
$(document).on('pageinit', function () {
$('#registrationForm').validate({
rules: {
firstname: {
required: true
},
lastname: {
required: true
}
},
messages: {
firstname: {
required: "Please enter your first name."
},
lastname: {
required: "Please enter your last name."
}
}
});
});
但是,jQuery Mobile 将 select
元素包装在 div
元素中,因此当插件添加错误 label
时,它会似乎放置在select
元素内部。要解决此问题,请使用 errorPlacement
回调,如下所示。它检查该元素是否为 select
元素,然后在最外层 div
包装器之后插入错误 label
。如果该元素不是 select
,则它仅使用默认位置。
errorPlacement: function (error, element) {
if (element.is('select')) {
error.insertAfter(element.parents('div.ui-select'));
} else {
error.insertAfter(element); // default placement
}
}
使用选择
进行演示:http://jsfiddle.net/QuwkZ/
关于Jquery Mobile验证错误位置和选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16001257/