Jquery Mobile Validation错误位置和选择

我在我的jQuery Mobile项目中添加了bassistance jQueryvalidation。 它工作得很完美，除了错误显示在文本输入内部而不是它们之下。 我知道我可以使用errorPlacement在输入下方使用div来输出我的错误消息，但这似乎不适用于选择菜单。

所以我有两个问题：

1. 有什么我可以做的不同，使错误消息显示在输入下方而不使用errorPlacement？
2. 如果必须使用errorPlacement，如何显示选择菜单的错误消息？

这是我的代码：

 $('#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() ); } }); });  

这是我的错误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%; } } 

Answer 1

默认情况下，当使用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包含div元素中的select元素，因此当插件添加错误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 } } 

DEMO使用select ： http ： //jsfiddle.net/QuwkZ/

Answer 2

从Jquery Mobile 1.4.3开始就提到这一点，这仍然是问题，@ Sparky建议的解决方法修复了它。