Question

我尝试创建一个表单验证程序，根据提交时字段是否为空，生成Bootstrap错误/成功大纲和glyphicon。目前它可以正常工作，但是一旦错误得到纠正并且字段已经填写，输入框不会显示为绿色并且输入框不会变为绿色，它只会在提交时变为绿色，用户只会看到绿色轮廓页面更改前的第二个简要说明。任何帮助将不胜感激。

HTML：

SELECT acct, 
       SUM(CASE WHEN plans='planA' THEN 1 ELSE 0 END) AS hasPlanA
  FROM tbl
 GROUP BY acct
HAVING hasPlanA = 0

jQuery的：

HAVING

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Answer 1

我对你的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>

并且js：

$(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');
     }
   })
 })

请记住，您不需要为表单提交一个提交按钮，您也可以将其白化。

jQuery Bootstrap - 空字段验证器无法正常工作

1 个答案: