jQuery验证 - 旁边的控制和错误总结在上面显示错误图标 [英] jquery validation - show error icon next to control and error summary on top

问题描述

我在我目前正在开发的应用程序（ASP.NET）使用jQuery验证有趣。

I am interesting in using Jquery Validation in the app (ASP.NET) I am currently developing.

使用默认设置在JQuery中真正弄乱了表格的布局。我想表现的形式顶部的错误总结，有一个浮动图标旁边的控制来指示错误输入。

Using the default settings in JQuery really messes up the layout of the form. I wanted to show the error summary on the top of the form and have a icon floating next to the control to indicate the error input.

我知道如何在窗体顶部，但不知道接下来该怎么来控制显示的图标错误总结。

I know how to get the error summary on the top of the form but not sure how to display the icon next to the control.

我什至不知道如果能在同一时间两者都做。

I am not even sure if its possible to do both at the same time.

感谢

推荐答案

您可以将处理程序来验证插件添加作为一个选项：

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; }

此附加误差为ID为顶一个元素，并补充说，扔了错误的元素旁边一个浮动的错误。希望这是你后的想法，如果不跟进评论，我会修改。

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.

这篇关于jQuery验证 - 旁边的控制和错误总结在上面显示错误图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！