jquery验证错误出现在文本框中，而不是标签中

Question

我似乎有一个有点奇怪的问题(我认为无论如何!!)。我正在创建一个小型的jquery移动web应用程序，并决定使用jqueryvalidation http://jqueryvalidation.org/来验证我的表单数据。它的工作原理，但错误出现在文本框内，应该填充，而不是下面它。

有人有什么建议吗?在这里查看:http://jsfiddle.net/chJ8B/3/

$().ready(function() {      
        // validate new customer form
        $("#newCustomer").validate({
            errorPlacement: function(error, element) {
            error.insertAfter(element); // <- the default
        },
            rules: {
                surname: "required",
                phoneNumber: "required"

            },
            messages: {
                surname: "Please enter the surname/company name",
            }
    });
     });
<div class="ui-field-contain"><label for="surname">Company/Surname</label><input type="text" name="surname" id="surname"  ></div>
<div class="ui-field-contain"><label for="forename">Forename</label><input type="text" name="forename" id="forename" value=""></div>

Answer 1

由于jQuery的移动标记，尝试在当前元素的父元素之后插入错误元素

$("#newCustomer").validate({
    errorPlacement: function(error, element) {
        error.insertAfter(element.parent()); // <- the default
    },
    rules: {
        surname: "required",
        phoneNumber: "required"
    },
    messages: {
        surname: "Please enter the surname/company name",
    }
});

演示:小提琴

---

在某些情况下，您可能需要根据您正在处理的标记类型添加一些条件放置

Answer 2

更新错误位置:

errorPlacement: function (error, element) {
  error.insertAfter(element.parent()); // <- the default
}