JavaScript Validator 绑定所有按钮点击事件答案

【问题标题】：JavaScript Validator bind all buttons click eventJavaScript Validator 绑定所有按钮点击事件
【发布时间】：2016-04-11 07:00:49
【问题描述】：

我正在使用这个 JS validate plugin，它正在工作，但它会拦截页面中的所有按钮点击，即使我点击 Back to Home，它也会尝试验证表单。

我只想在点击login按钮时验证表单，当我点击Back to Home按钮时我不需要验证表单，只需提交并重定向到主页。

我仍然在Back to Home 点击事件上提交表单的原因是因为我需要捕获电子邮件地址以在我的控制器中使用。

如何只捕获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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap validation

【解决方案1】：

发生这种情况的原因是因为您将任何按钮的单击事件与.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();
});

【讨论】：