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

Question

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

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

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

我什至不确定是否可以同时做这两个。

谢谢

Answer 1

You can add a handler to the validation plugin as an option:

$("#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; }

This appends the error to a element with ID "top" and adds a floating error beside the element that threw the error. Hopefully this is the idea you're after, if not follow-up with a comment and I'll revise.

Answer 2

我在这里发布了一篇博文，解释了如何从头到尾进行客户端和服务器端验证。希望能帮助到你！

Answer 3

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

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