如何将违规字段包装在 div 中？

Question

它显示<label>标签和错误消息作为默认行为，但是我的CSS设置方式我需要一个div来环绕有问题的元素并在<p>标签中显示一个消息。

没有错误，我的 html 看起来像这样：

<div class="grid-26 append-2">
  <p class="noMarginBottom">
    <label>First Name</label>
    <div class="jNiceInputWrapper">
      <div class="jNiceInputInner">
        <input type="text" class="text jNiceInput" name="name" />
      </div>
    </div>
  </p>
  <span class="clear" />
</div>

如果出现错误，它需要看起来像这样。注意 div 和 error 类和 <p> 标签。

$(document).ready(function() {
  $("#contact_form").validate({
    rules: {
      name: {
        required: true
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-26 append-2">
  <div class="error">
    <p>Please write your real name</p>
    <p class="noMarginBottom">
      <label>First Name</label>
      <div class="jNiceInputWrapper">
        <div class="jNiceInputInner">
          <input type="text" class="text jNiceInput" name="name" />
        </div>
      </div>
    </p>
    <span class="clear" />
  </div>
</div>

Answer 1

这是我的完整工作代码 - 我选择使用默认的 <label> 标签而不是 <p> 标签。

$(document).ready(function(){
$("#contact_form").validate({
    rules:{
        name: {
            required: true
        },
    }
    ,messages: {
        name: "Please write your full name"
    }
    ,errorClass: "error_label"
    ,errorPlacement: function(error,element){
        parentDiv = element.parents('.grid-26');
        parentDiv.wrapInner('<div class="error"></div>');
        errorDiv = parentDiv.children(".error");
        error.appendTo(errorDiv);
    }
    ,success: function(element){
        var errorDiv = element.parents('.error');
        element.remove();
        errorDiv.siblings().remove();
        errorDiv.replaceWith(errorDiv.children());
    }

});
});

感谢您的帮助，亚历克斯！！

Answer 2

我想通了：

        ,errorPlacement: function(error,element){

        $('[for='+element.attr("name")+']').parents('.grid-26')

        .prepend('<p>'+error.text()+'</p>')

        .wrapInner('<div class="error"></div>');

    }

Answer 3

label.parents('.append-2')
     .prepend('<p>Please write your real name</p>')
     .wrapInner('<div class="error"></div>');

要将其恢复到以前的状态：

var error = label.parents('.error');
error.siblings().remove();
error.replaceWith(error.children());