jQuery Mobile Validation错误位置&选择 [英] Jquery Mobile Validation error position & selects
问题描述
我将basististance jQuery验证添加到了jQuery Mobile项目的表单中.它运行完美，除了错误显示在文本输入中而不是显示在文本输入下方.我知道我可以使用errorPlacement在输入下方使用div来输出错误消息，但这似乎不适用于选择菜单.
所以我有2个问题:
- 是否可以采取一些措施使错误消息显示在输入下方而不使用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一起使用时，错误消息显示在input元素下方.删除自定义的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时，它会出现放在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/
I added bassistance jQuery validation to a form on my jQuery Mobile project. It works perfect, except for the errors show up inside the text inputs and not below them. I know I could use errorPlacement to use divs below my inputs to output my error messages, but this doesn't seem to work for select menus.
So I have 2 questions:
- Is there something I can do different to make the error messages show up below the inputs without using errorPlacement?
- How can I get error messages to show up for select menus if I have to use errorPlacement?
Here is my code:
<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>
And here is my error 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%;
}
}
By default, when using jQuery Validate plugin along with jQuery Mobile, the error messages show up below the input element. Removing your custom errorPlacement callback function...
Simple DEMO: 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."
}
}
});
});
However, jQuery Mobile wraps select elements within div elements so when the plugin adds the error label it appears to be placed inside of the select element. To fix this, use the errorPlacement callback as follows. It checks to see if the element is a select element and then inserts the error label after the outermost div wrapper. If the element is not a select, it just uses the default placement.
errorPlacement: function (error, element) {
if (element.is('select')) {
error.insertAfter(element.parents('div.ui-select'));
} else {
error.insertAfter(element); // default placement
}
}
DEMO using a select: http://jsfiddle.net/QuwkZ/
这篇关于jQuery Mobile Validation错误位置&选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
