jQuery 验证 - 错误放置答案

【问题标题】：jQuery Validation - error placementjQuery 验证 - 错误放置
【发布时间】：2011-07-01 09:16:58
【问题描述】：

我正在尝试使用 jQuery 验证中的“errorPlacement”DOCS:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

我想在无效输入之前放置错误，但这不起作用：

$("#myform").validate({
      errorPlacement: function(error, element) {
         error.appendTo( element.parent("form").prev("input") );
       },
       debug:true
     })

LIVE DEMO

非常感谢任何帮助！

【问题讨论】：

标记是什么样的，您想在该标记的哪个位置放置错误？
@kinakuta - 现场演示已添加到问题中
所以您希望错误消息出现在相应的文本框上方？
@kinakuta 是的，在（顶部）给定输入之前。

标签： jquery jquery-validate

【解决方案1】：

由于您想在无效元素之前插入错误消息，请使用insertBefore()：

errorPlacement: function(error, element) {
    error.insertBefore(element);
}

【讨论】：

哈米迪谢谢！那是有效的！几乎..正如您在我的示例中看到的那样-实际上有两个密码输入（一个用于聚焦效果，一个用于真实效果），我们可以为#username insertbefore（）指定它吗？对于#realpassword insertBefore('#password') ??
这仅适用于#password：errorPlacement: function(error, element) { if( $('label[for="realpassword"]') ){ error.insertBefore('#password'); } else if (('label[for="username"]')){ error.insertBefore('#username'); } }, 为什么？？
@Pete，它应该可以工作，但错误消息仍然出现在我浏览器中的 <input> 元素之后。浮动父母<span> 似乎是问题所在......
Hamidi - 但#username 在它之外.. :|同样的故事没有<span>
如果我们改变顺序 - 两者都出现在#user errorPlacement: function(error, element) { if ( $('label[for="username"]') ){ error.insertBefore('#username'); } else if( $('label[for="realpassword"]') ){ error.insertBefore('#password'); } },

【解决方案2】：

只需将部分放在您想要错误的位置

<label for="[your checkbox id]" generated="true" class="error"></label>

例如：

<label><input type="checkbox" name="checkbox" id="checkbox" value="1" > Checkbox content</label>
<label for="checkbox" generated="true" class="error"></label>

【讨论】：

【解决方案3】：

我建议使用 html 模板来指定位置和样式，如下所示：

<input name="patient_gender" required>
<label for="patient_gender" class="validation_error_message help-block"></label>

并覆盖错误放置功能

$.validator.setDefaults({
    errorPlacement: function(error, element) {
        var name = element.attr('name');
        var errorSelector = '.validation_error_message[for="' + name + '"]';
        var $element = $(errorSelector);
        if ($element.length) { 
            $(errorSelector).html(error.html());
        } else {
            error.insertAfter(element);
        }
    }
});

【讨论】：

【解决方案4】：

另一种选择是……

  errorPlacement: function (error, element) {
    element.before(error);
  }

【讨论】：