jquery 验证 - 在控件旁边显示错误图标，在顶部显示错误摘要答案

【问题标题】：jquery validation - show error icon next to control and error summary on topjquery 验证 - 在控件旁边显示错误图标，在顶部显示错误摘要
【发布时间】：2009-06-29 23:01:15
【问题描述】：

我对在我目前正在开发的应用程序 (ASP.NET) 中使用 Jquery Validation 很感兴趣。

在 JQuery 中使用默认设置确实会弄乱表单的布局。我想在表单顶部显示错误摘要，并在控件旁边浮动一个图标以指示错误输入。

我知道如何在表单顶部获取错误摘要，但不确定如何在控件旁边显示图标。

我什至不确定是否可以同时进行。

谢谢

【问题讨论】：

标签： asp.net jquery-validate

【解决方案1】：

您可以选择向验证插件添加处理程序：

$("#form").validate({ 
  errorPlacement: function(error, element) {
    error.wrap("<li></li>").appendTo($("#top")); 
    $('<div class="errorIcon"></div>').insertAfter(element);
  }
});

<ul id="top" class="errors"></ul>

.errors { color: red; }
.errorIcon { background: url(errorIcon.png); width: 16px; height: 16px; float: right; }

这会将错误附加到 ID 为“top”的元素，并在引发错误的元素旁边添加一个浮动错误。希望这是您所追求的想法，如果没有跟进评论，我会修改。

【讨论】：

【解决方案2】：

我已经发布了一篇博文here，它解释了如何从头到尾进行客户端和服务器端验证。希望对您有所帮助！

【讨论】：

【解决方案3】：

考虑使用原生ASP.NET validation 代替：RequiredFieldValidator、RegularExpressionValidator、RangeValidator 等。还有ValidationSummary 控件。这些控件可以发出执行客户端验证的 JavaScript 代码（只需将 EnableClientScript 属性设置为 true）。

ASP.NET 验证器的另一个好处是您还可以获得服务器端验证 - 这对于面向公众的网站至关重要。

【讨论】：

我对此表示反对，因为问题是使用特定框架寻求帮助。提供使用不同框架的建议没有帮助或指导意义。