所需字段的错误放置问题

Question

​

对于所需字段的错误位置，我有一个问题，它完全重叠在字段的标签上，而且我对类form-label-group使用了引导模式，如果删除类，它可以正常工作。我希望在每个输入字段的范围内显示错误消息。当我在提交之前验证表单时，用户确实很难检查字段名。

​

$('#Test').validate({
  errorElement: 'span', //default input error message container
  errorClass: 'help-block', // default input error message class
  focusInvalid: false, // do not focus the last invalid input
  ignore: "",
  rules: {
    FName: {
      required: true
    },
    LName: {
      required: true
    }
  },
  invalidHandler: function(event, validator) { //display error alert on form submit
  },
  highlight: function(element) { // hightlight error inputs
    $(element)
      .closest('.form-group').addClass('has-error'); // set error class to the control group
  },
  success: function(label) {
    label.closest('.form-group').removeClass('has-error');
    label.remove();
  },
  errorPlacement: function(error, element) {
    if (element.closest('.input-icon').length === 1) {
      error.insertAfter(element.parent("span"));
    } else {
      error.insertAfter(element.parent("span"));
    }
  },
});

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal-body">
  <form id="Test" action="#" class="addForm floating-labels m-t-40">


    <div class="row">
      <div class="col-md-3 col-lg-3 col-3">
        <div class="form-group">
          <input type="text" id="FName" name="FName" value="" class="form-control" required="required" autofocus="autofocus" maxlength="50">
          <span class="bar"></span>
          <label for="FName">First Name*</label>
        </div>
      </div>

      <div class="col-md-3 col-lg-3 col-3">
        <div class="form-group">
          <input type="text" id="LName" name="LName" value="" class="form-control" required="required" autofocus="autofocus" maxlength="50">
          <span class="bar"></span>
          <label for="LName">Last Name*</label>
        </div>
      </div>
    </div>
</div>

​

Answer 1

谢谢斯瓦蒂而且成功了。这是我班上的一个问题，也是引起这个问题的原因。element.parent("span")到element.next("span")