Why does form submit even if return value is false?

Question

I have a Bootstrap login form and Javascript validation:

HTML

<form id="loginForm" class="form-horizontal" role="form" action="registration.php" method="POST">
        <div class="form-group">
                <label class="control-label col-sm-2 modal-text" for="loginEmail">Email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control modal-input" id="loginEmail" placeholder="Insert email"/> 
                </div>
        </div>
        <div class="form-group">
                <label class="control-label col-sm-2 modal-text" for="loginPassword">Password:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control modal-input" id="loginPassword" placeholder="Insert password"/> 
                </div>
        </div>
        <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                                <label class="modal-text"><input type="checkbox"/> Remember me</label>
                        </div>
                </div>
        </div>
        <button type="button" class="btn btn-default btn-block buttons" id="loginBtn">Login</button>
</form>

And this is my Javascript validation:

function validateEmail(id){
     var $div = $('#' + id).closest('div');
     var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

     if(!regex.test($('#' + id).val()))
     {
         $div.addClass('has-error');
         return false;
     }
     else
     {
         $div.removeClass('has-error');
         return true;
     }
}

function validateText(id){
     var $div = $('#' + id).closest('div');

     if($('#' + id).val() == null || $('#' + id).val() == '')
     {
         $div.addClass('has-error');
         return false;
     }
     else
     {  
         $div.removeClass('has-error');
         return true;
     }
}

$(document).ready(function (){
     $('#loginBtn').click(function (){

          if(!validateEmail('loginEmail'))
          {
               return false;
          }
          if(!validateText('loginPassword'))
          {
               return false;
          }

          $('form#loginForm').submit();

      });
});

If I press login button, form submits immediately even if fields are empty.Is there something I'm missing or doing wrong?

UPDATE What I discovered is that I put quotes around my regex expression which caused javascript error. I also changed button type from submit to button. Now it is working.

So to sum up: My validation didn't work because of quotes in regular expression. Validation will work even if I left button type submit.

Answer 1

You have used button with type="submit" and method="POST". So, when you click button it is immediately submitting form. Try type="button" for your submit button.