Сообщение об ошибке проверки JQuery - изменить местоположение сообщения

Question

Я использую плагин проверки jquery. У меня есть HTML, который выглядит так:

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

В настоящее время сообщение об ошибке отображает после поля выбора. Это заставляет мою страницу сдвигаться влево и портит ее внешний вид.

Как отобразить его после Выберите город вместо встраивания.

Спасибо за вашу помощь.

Answer 1

Вы можете изменить селекторы и размещение, но это должно дать вам представление о том, как это работает.

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

Answer 2

Вы также можете добавить контейнер div ниже h2

<div id='errorContainer'></div>

add errorPlacement: строка с вашим кодом проверки, и он будет отображать все ошибки внутри errorCotainer div

$( "#frm_register" ).validate(
{

//  errorElement: "span",// by default em is used to display each error message

    errorPlacement: function(error, element) {
        error.appendTo( $('#errorContainer'));
    }

});