jquery验证错误出现在文本框中而不是标签中[重复]答案

【问题标题】：jqueryvalidation error appears in the textbox rather than label [duplicate]jquery验证错误出现在文本框中而不是标签中[重复]
【发布时间】：2014-03-17 17:19:23
【问题描述】：

我遇到了一个看起来有点奇怪的问题（无论如何我都这么认为！！）。我正在创建一个小型 jquery 移动 webapp，并决定使用 jqueryvalidation http://jqueryvalidation.org/ 来验证我的表单数据。它可以工作，但错误出现在应该填充的文本框内，而不是在它下面。

有人有什么建议吗？ jsfiddle在这里：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>

【问题讨论】：

这是因为 jQuery 移动样式....尝试jsfiddle.net/arunpjohny/Gsyrz/1
嗨，你有什么改变？
查看errorPlacement - insertAfter(element.parent()) - 您可能需要使用一些条件语句来确定在何处添加错误元素
基于收到错误的element，你需要放置/重新定位错误消息。
太完美了 - 谢谢 :D

标签： jquery css jquery-mobile jquery-validate

【解决方案1】：

好像是因为jQuery mobile的标记，尝试在当前元素的父元素之后插入错误元素

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

演示：Fiddle

您可能需要根据您在某些情况下处理的标记类型添加一些有条件的展示位置

【讨论】：

【解决方案2】：

用这个更新错误位置：

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

【讨论】：