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

【问题标题】：jquery validation error message - change the location of messagejquery 验证错误消息 - 更改消息的位置
【发布时间】：2011-04-14 22:20:45
【问题描述】：

我正在使用 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>

错误消息当前显示在选择框之后。这会导致我的页面向左移动并弄乱它的外观。

如何在 Select A City 之后显示它而不是内联它。

感谢您的帮助。

【问题讨论】：

标签： jquery validation plugins

【解决方案1】：

您可以更改选择器和位置，但这应该会让您了解它的工作原理。

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

【讨论】：

这会覆盖默认验证吗？我将您的代码添加到 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); } } }
有点，它设置了默认值。但是，您可以像我一样将逻辑应用于仅影响某些元素。这是官方文档的页面，查看源代码。 jquery.bassistance.de/validate/demo/custom-methods-demo.html
您可以将规则设置为特定形式而不覆盖默认规则：$('#form_name').validate({ errorPlacement: function (error, element) { // some code } });
如果您只想为表单上的一个输入执行此操作怎么办？
上述方法中最简单的方法就是添加一个唯一的 CSS 类名并定位它。

【解决方案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'));
    }

});

【讨论】：