CODEWITHSUNDEEP
javascriptjqueryforms
NutCracker
NutCracker

Reputation: 12273

Why does form submit even if return value is false?

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.

Upvotes: 3

Views: 1284

Answers (4)

cske
cske

Reputation: 2243

Stop event handling, probably you don't want to do anything else than to submit form if it is valid 

$('#loginBtn').click(function (Evt){
          Evt.stopPropagtion();
          Evt.preventDefault(); 
          if(!validateEmail('loginEmail'))
          {
               return false;
          }
          if(!validateText('loginPassword'))
          {
               return false;
          }

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

      });

Upvotes: 0

Kashyap
Kashyap

Reputation: 391

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.

Upvotes: 3

fdomn-m
fdomn-m

Reputation: 28611

It submits anyway, because the button is a submit button:

<button type="submit"

The return false from the click handler cancels the click event, but no other events - ie the submit event still fires.

You can change the button to type=button and then submit the form in the click handler (which you're already doing):

<button type="button"

Upvotes: 2

Kewin Dousse
Kewin Dousse

Reputation: 4027

Use onsubmit instead of onclick, and return true when the form is valid.

In your case, the onclick event will be fired, correctly return false, and then as the button is still a submit type, it will still submit the form.

Upvotes: 2

Related Questions