JavaScript Validator bind all buttons click event

Question

I am using this JS validate plugin and it is working, but it will intercept all button clicks in the page and is trying to validate the form even I click Back to Home .

I only want the form to validate when I click the login button, when I click the Back to Home button I do not need to validate the form, just submit and redirect to the home page.

The reason I am still submitting the form on the Back to Home click event is because I need to capture the email address for use in my Controller.

How can I only capture the click events of the Login and Back to Home buttons?

Is it possible to stop the form from being validated when I click the Back to Home button?

HTML & JS Code:

<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

The reason this is happening is because your binding the click events of any button with the class of .btn .

To avoid this you can bind the click events of only the buttons you need by adding an id to the form-group that contains your login and back to home buttons.

<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>

Modify your jQuery to only capture the #form-actions button click events

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