jquery validation - show error icon next to control and error summary on top

Question

Hi,

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

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.

Thanks

Answer 1

Consider using native ASP.NET validation instead: RequiredFieldValidator, RegularExpressionValidator, RangeValidator etc. There is also ValidationSummary control. These controls can emit JavaScript code that would do client-side validation (simply set EnableClientScript attribute to true).

Another benefit of ASP.NET validators is that you also get server-side validation - this is critical for public-faced websites.

Answer 2

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.