Page refreshing on submit button, need it to hide form

Question

I thought this would be the best place to ask this question. So I am currently in development of a website. Just ran into a few issues. Whenever I hit submit on an input box, instead of hiding that form and showing the next it keeps refreshing the page. Which is weird because if I browse the page locally and not on my server everything works as I need it too. I'll go ahead and post my code in hopes someone may know my issue. Thank you in advance!

Here is the button:

 <form id="firstForm">
            <div class="form-group form-group-lg">
              <label for="InputUsername">Username</label>
              <input type="text" class="form-control" name="InputUsername" id="InputUsername"
                       placeholder="Username">
      </div>
            <button type="submit" class="btn btn-default btn-lg btn-block">Connect</button>
    </form>

Here is the Jquery:

$("#firstForm").validate({ rules: { InputUsername: { required: true, minlength: 1 } }, messages: { InputUsername: "Enter a valid username/email" }, submitHandler: function (form) { $(\'#firstForm\').fadeOut(function () { $(\'#secondForm\').fadeIn().removeClass(\'hidden\');

Answer 1

It's not strange. a type submit <button> will trigger a form action - unless you specify in your code an Event.preventDefault()

or if you specify strictly that it's a type button <button type="button">Connect</button> than the form will not submit and you can move on with your .validate( JS script.

Answer 2

All you need to do is to use an event.preventDefault() or return false in the button action function that you write as the submit button will trigger the form action otherwise.

$("#firstForm").submit(function(event) {

  event.preventDefault();

  //Some action code here

});

Answer 3

Use preventDefault to not to trigger the reload action:

$("#firstForm").submit(function(e) {
    e.preventDefault();
}).validate({...});