jquery validation error message - change the location of message

Question

I am using jquery validation plugin. I have an html that looks like:

<h2>Select A City</h2>

<select class="required city-selection-list" id="city_city_id" name="city[city_id]">
  <option value=""></option>

  <option value="146">San Francisco Bay Area</option>
  <option value="147">San Francisco</option>
  <option value="311">Los Angeles</option>
  <option value="344">New York</option>
  <option value="395">San Diego</option>
 </select>

The error message is currently displaying after the select box. This causes my page to shift left and messes up how it looks.

How do I display it after Select A City instead of inlining it.

Thanks for your help.

Answer 1

You can change you selectors and placement, but this should give you an idea on how it works.

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        if (element.hasClass("city-selection-list")) {
           error.insertBefore(element);
        }
    }
});