Как обернуть оскорбительное поле в 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());