how to customize the position of the error message for each field from jquery validate plugin

Question

Hi,

I am using the jquery validate plugin, in combination with some custom field types (custom select boxes)

default behaviour of the jquery validation plugin is to insert the error message element, right after the form element. though that would render the error message inbetween the hidden select element, and the replaced ul element for custom select box functionality.

i found the option: 'errorLabelContainer but that places all errors in that 1 container.

I am looking for a solution to place the error label below every form element, (and so, after the custom form elements like these fake select boxes), and not the custuom position option that places all errors in the same container.

if this would involve moving them manually after each error trigger, i'd rather have a clean solution first

Answer 1

You can use errorPlacement option for this, for example:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.insertAfter(element.parent());
   }
});

I'm not sure what "below" means in your code, but this is undoubtedly the option your after, it's called for each element, and you can replace the error in relation to the element however you want. The default for this option is error.insertAfter(element);, making it appear just after the element.