使用jQuery验证自定义错误标签放置（针对所有或部分错误）

我想在自定义位置放置一个错误标签（并非全部）。jQuery提供了这个选项，但是我找不到任何关于如何放置一条特定错误消息以及如何不更改所有其他错误消息的默认位置的信息

---

请务必检查以下所有答案。有多种解决方案。谢谢大家

因此，如果您希望所有jQuery验证错误消息都显示在一个地方，您可以使用 （查找错误位置）选项

我注意到一些答案在这里答案一，但不是两个选项

(一) 也就是说，如果您希望对所有错误进行自定义放置，您可以执行以下操作：

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

(二) 如果要为一个或多个错误标签指定特定位置，可以执行此操作

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}

---

这是一个更通用的解决方案，不特定于OP的HTML结构

如果您只希望一个特定的错误标签位于不同的位置，而其余的标签仍处于默认位置，请尝试以下操作

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

---

实际上，没有必要使用任何javascript代码，我发现了一个简单的解决方案。您可以强制jQuery验证将验证错误放置在DOM元素中

例如，jQuery生成如下错误：

 <label for="firstname" generated="true" class="error">This field required.</label>

jQuery将找到该空白字段并为您放置错误消息

---

不要忘记label元素中的for字段

我发现，如果在不同的位置有两个以上的自定义错误标签，那么如果您没有在每个if上为errorPlacement返回一个值，则可能会出现疯狂的位置错误。在这个示例中，我有两个复选框，错误标签，一个复选框，一个标签

HTML代码

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

我是公司的所有者

我是一家中介公司


我同意，并且我阅读了隐私政策和术语的使用

剧本

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>

$（“#登记表”）。验证（{
errorPlacement:函数（错误，元素）{
if（element.attr（“name”）=“option[]”）{
error.appendTo（'#errordiv'）；
返回；
}
if（element.attr（“name”）=“agree”）{
error.appendTo（'error#u agree'）；
返回；
}否则{
错误。插入符（元素）；
}
}
});

为什么选择

error.appendTo（element.parent（“td”）.next（“td”）

作为位置，而实际上它是任意的？我知道你在回答自己的问题，但如果没有原始代码来提供实际的上下文，你的答案可能会让未来的读者感到困惑。我提供了一个更通用的答案，与原始问题的通用性相匹配。此外，通常一个人在回答自己的问题之前会等待一段时间，以便给其他人充分的机会作出回应。你在这里没有做错什么，但是各种各样的答案都能提高质量。斯帕克同意，我很高兴找到答案。从docs.jquery.com上抓取了它，但没有注意到它们的示例令人困惑。我将返回并更新它以使其更清晰。谢谢通过使用内部a包含一个演示，并在很长一段时间内观看您的问题带来的选票。嗨，我成功地将所有错误放在一个地方，但它只出现在一行中。如何将错误拆分为新行？请帮助Hello Hima，你能分享你的代码吗？因为我遇到了同样的问题。Q和A上都有+1，谢谢你的分享。很好的解决方案！没有必要为了这么简单的事情而去搞jQuery。你知道生成的

属性是否必要吗？在没有使用jQuery Validate 1.11.1.Hi@Sam的属性的情况下，它似乎可以正常工作，实际上没有检查该属性是否必要。我也这么认为。你可能是对的。请注意，只有当
for
属性设置为输入的
名称而不是其
id
时，这似乎才有效。对于我来说，这比当前接受的答案简单得多，谢谢！斯巴基先生，如果可能的话，你能分享完整的代码让我明白吗？
<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>