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

#jquery #validation #plugins

#jquery — jquery — запрос #проверка #Плагины #jquery

Вопрос:

Я использую плагин проверки 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>

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

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

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

Ответ №1:

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

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

1. Отменяет ли это проверку по умолчанию? Я добавил ваш фрагмент кода в jquery.validation.js и он жалуется, что .validate-form не является функцией. // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults setDefaults: function(settings) { $.extend( $.validator.defaults, settings ); errorPlacement: function(errorClass, element) { if (element.hasClass("city-selection-list")) { errorClass.insertBefore(element); } } }

2. Вроде как оно устанавливает значение по умолчанию. Однако вы можете, как и я, применить логику только для воздействия на определенные элементы. Вот официальная страница документа по этому вопросу, посмотрите на источник. jquery.bassistance.de/validate/demo/custom-methods-demo.html

3. вы можете установить правила для определенной формы, не переопределяя правила по умолчанию : $('#form_name').validate({ errorPlacement: function (error, element) { // some code } });

4. Что, если вы хотите сделать это только для одного ввода в форме?

5. Самым простым способом в приведенном выше методе было бы просто добавить уникальное имя класса CSS и настроить таргетинг на него.

Ответ №2:

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

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

добавьте строку 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'));
    }

});