Jquery验证错误位置&选择
Jquery验证错误位置&选择
提问于 2013-04-14 16:18:36
我在我的jQuery移动项目上的一个表单中添加了基本的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%;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-15 14:19:55
默认情况下，当使用jQuery验证插件和jQuery移动时，错误消息将显示在输入元素下面。删除自定义的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移动将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
}
}使用select** [http://jsfiddle.net/QuwkZ/**](http://jsfiddle.net/QuwkZ/)的演示
Stack Overflow用户
发布于 2018-05-08 15:12:01
顺便提一下jQueryMobile1.4.3，这仍然是问题，@Sparky的建议解决了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16001257
复制相关文章
相似问题
腾讯云开发者
