Bootstrap jQuery - 空字段验证的问题

I've written some jQuery to validate my Bootstrap forms, however I'm having a few issues.

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

Firstly, I want a red outline to appear if the user clicks off the input field without typing anything in: JSFiddle example here. In this example I'm using the Bootstrap Validator plugin, however I want to imitate this effect without using the plugin.

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

Second, and linked to the issue I just mentioned, the green outline only appears once the user clicks the submit button, thus the user only sees it for half a second or so before they are redirected, making it a little pointless. Again, this would be solved by having an error/success outline appear once the user clicks off the input. If anyone could help me out it would be greatly appreciated.

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

This is the code I have so far:

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

HTML:

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:

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

的jsfiddle

1 个解决方案

#1

Try this updated fiddle: jsfiddle.net/xqwsobmo/20/

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

Need to add input blur event and validate input

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

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

#1