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>

matt. · Accepted Answer · 2016-01-07 05:33:17Z

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

edited Jan 7, 2016 at 5:33

answered Jan 7, 2016 at 1:20

matt.

2,3725 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript Validator bind all buttons click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related