jQuery引导-空字段验证程序工作不正常

我试图创建一个表单验证程序，根据提交时字段是否为空，生成引导错误/成功大纲和glyphicon。目前它可以工作，但是字形图标没有显示，输入框在错误纠正和字段填充后不会变为绿色，它只在提交时变为绿色，用户在页面更改之前只会看到绿色的轮廓一秒钟。任何帮助都将不胜感激

HTML:

---

我对您的html和js做了一些更改，我想您正在寻找类似这样的内容：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form id="auth_form" action="action.php" method="post">

  <div class="form-group has-feedback" name="auth_code" id="auth_code">
    <label for="auth_code" class="control-label">
    <span class='glyphicon' id="iconBad"></span>Authorisation Code</label>
    <input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
    <span class="form-control-feedback glyphicon"></span>
  </div>

  <div class="form-group">
    <div>
      <button class="btn btn-info" name="submit" type="submit" id="btnSubmit">Submit</button>
    </div>
  </div>

</form>

请记住，您不必为表单设置提交按钮，您也可以使用它

 $(document).ready(function() {

   $('#auth_form').on('submit', function(e) {
     var auth_code = $('#auth_code_input');

     if (!auth_code.val()) {
       auth_code.closest('.form-group').addClass('has-error');
       auth_code.closest('.form-control-feedback').addClass('glyphicon-remove');
       e.preventDefault();
     } else {
       auth_code.closest('.form-group').removeClass('has-error').addClass('has-success');
       auth_code.closest('.form-control-feedback').addClass('glyphicon-ok');
     }
   });

 });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form id="auth_form" action="action.php" method="post">

  <div class="form-group has-feedback" name="auth_code" id="auth_code">
    <label for="auth_code" class="control-label">
    <span class='glyphicon' id="iconBad"></span>Authorisation Code</label>
    <input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
    <span class="form-control-feedback glyphicon"></span>
  </div>

  <div class="form-group">
    <div>
      <button class="btn btn-info" name="submit" type="submit" id="btnSubmit">Submit</button>
    </div>
  </div>

</form>

$(document).ready(function() {
     $("#auth_form").submit(function(e){
        e.preventDefault()
   }) 
   $("#btnSubmit").click(function () {
     var auth_code = $('#auth_code_input').val()

     if (auth_code=="") {
       $('#auth_code').addClass('has-error');
       $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');

     } else {
       $('#auth_code').removeClass('has-error').addClass('has-success');
       $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
     }
   })
 })