Question

它显示<label>标签，并将错误消息作为默认行为，但是我的CSS设置方式我需要一个div来包围违规元素并在<p>标签中显示消息。< / 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());
    }

});
});

感谢你的帮助Alex !!

Answer 2

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());

Answer 3

我明白了：

        ,errorPlacement: function(error,element){

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

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

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

    }

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

3 个答案: