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

Question

我正在开发的应用程序（ASP.NET）中使用Jquery验证很有趣。

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

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

我什至不确定是否可以同时执行这两项操作。

谢谢

Answer 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”的元素上，并在引发错误的元素旁边添加一个浮动错误。希望这是您要遵循的想法，如果不提出意见，我会进行修改。

Answer 2

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

Answer 3

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

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