Question

我已经编写了一些jQuery来验证我的Bootstrap表单，但是我遇到了一些问题。

首先，如果用户点击输入字段而不输入任何内容，我希望显示红色轮廓：JSFiddle example here。在这个例子中，我使用Bootstrap Validator plugin，但是我想在不使用插件的情况下模仿这种效果。

其次，并且与我刚刚提到的问题相关联，绿色轮廓仅在用户单击提交按钮时出现，因此用户在重定向之前只能看到它半秒左右，这使得它有点无意义。同样，这可以通过在用户点击输入后出现错误/成功大纲来解决。如果有人能帮助我，我将不胜感激。

这是我到目前为止的代码：

HTML：

<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">
    Authorisation Code</label>
    <input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
    <span class="form-control-feedback glyphicon" id="iconBad"></span>
  </div>

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

</form>

jQuery的：

$(document).ready(function() {

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

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

JSFiddle

Answer 1

试试这个更新的小提琴：jsfiddle.net/xqwsobmo/20/

需要添加输入模糊事件并验证输入

$(document).ready(function() {    
   $('#auth_code_input').blur(function(){
      if(!ValidateInput()){
          e.preventDefault();
      }
   });

   $('#auth_form').on('submit', function(e) {
     if(!ValidateInput()){
          e.preventDefault();
      }
   })
 });

 function ValidateInput(){
    var IsValid=false; 
    var auth_code = $('#auth_code_input').val()    
    if (auth_code=="") {
       $('#auth_code').addClass('has-error');
       $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
         IsValid=false;
    } else {
       $('#auth_code').removeClass('has-error').addClass('has-success');
       $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
       IsValid=true;
    }         
     return IsValid;
 }

Bootstrap jQuery - 空字段验证的问题

1 个答案: