JavaScript验证程序绑定所有按钮的单击事件

Question

我正在使用此JS validate插件 ，它正在运行，但是它将拦截页面中的所有按钮单击，并且即使我单击Back to Home ，也试图验证表单。

我只希望表单在单击“ login按钮时进行验证，当我单击“ Back to Home按钮时，我不需要对表单进行验证，只需提交并重定向到主页即可。

我仍在“ Back to Home单击事件上提交表单的原因是，我需要捕获要在Controller中使用的电子邮件地址。

如何仅捕获“ Login和“ Back to Home按钮的单击事件？

当我单击“ Back to Home按钮时，是否可以停止验证表单？

HTML和JS代码：

<form data-toggle="validator" role="form">
  <div class="form-group">
        <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-group col-sm-6">
      <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
      <span class="help-block">Minimum of 6 characters</span>
    </div>
    <div class="form-group col-sm-6">
      <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
      <div class="help-block with-errors"></div>
    </div>
    </div>
  </div>
  <div class="form-group">
   <button type="button" class="btn btn-primary" data-action="login">Login</button>
   <button type="button" class="btn btn-danger"  data-action="backtohome" >Back To Home</button>
  </div>
</form>
<script src="http://127.0.0.1/js/validator.min.js"></script>
<script type="text/javascript">
$('.btn').on('click', function(event) {
    event.preventDefault(); 
    var action = $(this).data('action');
    if (action !== "nil")
    {
        $('#action').val(action);
        var form     = $("form");
        form.submit();
    }
});
</script>

Answer 1

发生这种情况的原因是因为您将任何按钮的单击事件与.btn类.btn 。

为了避免这种情况，您可以通过将id添加到包含login和back to home按钮的form-group ，从而仅绑定所需按钮的单击事件。

<div id='form-actions' class="form-group">
   <button type="button" class="btn btn-primary" data-action="login">Login</button>
   <button type="button" class="btn btn-danger"  data-action="backtohome" >Back To Home</button>
</div>

修改jQuery以仅捕获#form-actions按钮单击事件

$('#form-actions button').on('click', function(event) {
    event.preventDefault();
    var action = $(this).data('action'),
        form = $("form");

    if (action == 'backtohome') {
        $('form').validator('destroy');
    } 

    if (action !== "nil") {
        $('#action').val(action);
    }

    form.submit();
});