必填字段的错误放置问题

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")