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

Question

我想在自定义位置放置一个错误标签（不是全部）。jQuery 提供了这个http://docs.jquery.com/Plugins/Validation/validate#toptions选项，但我找不到任何关于如何放置一个特定错误消息而不更改所有其余部分的默认位置的信息？

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

Answer 1

因此，如果您希望所有 jQuery Validate 错误消息出现在一个地方，您可以在该页面上使用 http://docs.jquery.com/Plugins/Validation/validate#toptions (Find errorPlacement) 选项。

我注意到这里的一些答案回答了一个但不是两个选项。

1）话虽如此，如果您想要为所有错误自定义放置，您可以这样做：

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

2) 如果您想为一个或多个错误标签指定特定位置，您可以这样做。

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);
}

Answer 2

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

例如，jQuery 会生成如下错误：

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

您可以将此标签 DOM 元素放置在您的下一个td块或li元素中，或者任何您想要的空白处。

<label for="firstname" generated="true" class="error"></label>

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

只是不要忘记标签元素中的for字段！

Answer 3

这是一个更通用的解决方案，并不特定于 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);

     }
   }
});

errorPlacement:选项的在线文档

Answer 4

我发现，如果您在不同位置有两个以上的自定义错误标签，如果您不这样做，也可能会出现一个疯狂的位置错误，如果对于 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>