如何使用Bootstrap验证器在所有输入均有效时启用提交按钮

时间:2018-06-08 16:48:52

标签: javascript jquery twitter-bootstrap bootstrapvalidator

我希望我的提交按钮一直被禁用,直到我完成所有输入并且所有这些输入都有效。例如,我有两个输入:用户名和电子邮件。当两个输入都有效时,bootstrap验证器的默认设置将启用提交按钮。但是当我输入用户名的有效内容并且不对电子邮件执行任何操作时,验证程序只能检测用户名的输入,并且由于它有效,验证程序启用提交按钮。但是我还没有在电子邮件上输入任何内容,我希望只有两个输入完成且有效才启用该按钮。请帮帮我,谢谢!

我在下面附上我的html代码和js代码。



$(function () {
   $('form').bootstrapValidator({
    message: 'This value is not valid',
     feedbackIcons: {
       valid: 'glyphicon glyphicon-ok',
       invalid: 'glyphicon glyphicon-remove',
       validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
       username: {
         validators: {
           notEmpty: {
             message: 'username cannot be null'
           }
         }
       },
       email: {
         validators: {
           notEmpty: {
             message: 'email cannot be null'
           }
         }
       }
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<form>
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control"name="username" />
   </div>
   <div class="form-group">
      <label>Email address</label>
      <input type="text" class="form-control"name="email" />
   </div>
   <div class="form-group">
       <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </div>
 </form>
&#13;
&#13;
&#13;

0 个答案:

没有答案