JavaScript Validator bind all buttons click event

Question

Я использую этот 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> 

Answer 1

Причина это происходит потому, что ваше связывание события нажатия любой кнопки с классом .btn.

Чтобы избежать этого вы можете связать событие щелчка только кнопки, необходимые при добавлении id к form-group, который содержит вашу login и back to home кнопки.

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