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

我想在自定义位置放置一个错误标签(不是全部)。 jQuery提供了此[http://docs.jquery.com/Plugins/Validation/validate#toptions]选项,但我找不到有关如何放置一条特定错误消息并且不更改所有其余错误的默认位置的任何信息?

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

chainwork asked 2020-02-22T20:04:10Z
4个解决方案
76 votes

因此,如果您希望所有jQuery Validate错误消息都显示在一个位置,则可以使用该页面上的[http://docs.jquery.com/Plugins/Validation/validate#toptions](查找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);
}
chainwork answered 2020-02-22T20:04:36Z
45 votes

实际上,不必为此使用任何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字段!

Abdurrahman I. answered 2020-02-22T20:05:14Z
16 votes

这是一种更通用的解决方案,不特定于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:选项的在线文档

Sparky answered 2020-02-22T20:05:44Z
0 votes

我发现,如果您在不同的位置有两个以上的自定义错误标签,则如果存在错误,则可能会出现疯狂的位置错误;如果有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>
XMaster answered 2020-02-22T20:06:12Z
translate from https://stackoverflow.com:/questions/13200659/custom-error-label-placement-using-jquery-validate-for-all-or-some-of-your-erro