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

您还可以在h2以下添加容器div

<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'));
    }

});

jquery验证错误消息 - 更改消息的位置

2 个答案: