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

Posted 2023-05-09

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

【英文标题】：Custom Error Label Placement using jQuery validate (For all or some of your errors)

【发布时间】：2012-10-23 10:22:49

【问题描述】：

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

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

【问题讨论】：

在 Q 和 A 上 +1 为您提供有用的分享。

【参考方案1】：

因此，如果您希望所有 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);

【讨论】：

你为什么选择error.appendTo( element.parent("td").next("td") )作为位置，而它真的很随意？我意识到您正在回答自己的问题，但是如果没有原始代码来提供实际上下文，您的回答可能会使未来的读者感到困惑。我提供了一个更通用的答案，与原始问题的通用性相匹配。此外，通常一个人在回答自己的问题之前会等待一段时间，以便给其他人足够的机会做出回应。您在这里没有做错任何事情，但是各种答案可以提高 SO 的质量。

同意 Sparky，我很高兴能找到答案。从 docs.jquery.com 获取它，但没有注意到他们的示例令人困惑。我会回去更新它以更清楚。谢谢！

在jsFiddle 中使用Validate Plugin's CDN link 包含一个演示，并观察您的问题在很长一段时间内都会获得支持。

嗨，我成功地将所有错误放在一个地方，但它只出现在一行中。如何将错误分解为新行？请帮忙

你好 Hima，你能分享你的代码吗？因为我遇到了同样的问题。

【参考方案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 字段！

【讨论】：

很好的解决方案！没有必要为了这么简单的事情搞乱 jQuery。

您知道generated 属性是否必要吗？如果没有使用 jQuery Validate 1.11.1 的属性，我似乎可以正常工作。

嗨@Sam，实际上并没有检查该属性是否必要。我也这么认为。你可能是对的。

请注意，这似乎只在for 属性设置为输入的name 而不是id 时才有效。

对我来说比目前接受的答案更简单的方法，谢谢！

【参考方案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);

     
   
);

Online Documentation for errorPlacement: option

【讨论】：

Mr.Sparky。如果可能的话，你能分享完整的代码以便我理解吗？

【参考方案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>