Why 2 Clicks needed to submit form

Question

I am submitting form via two submit buttons but why it needs 2 clicks to submit the form My Form looks as below:

<form id="mychkform" method="POST" class="">
   <input type="email" class="form-control" id="email" name="email" 
   placeholder="Enter email" data-original-title="" title="" />
   <input type="radio" name="cnt_as" checked="checked" value="cnt_as_guest"/>
   I want to continue as guest<br/>
    <input type="radio" name="cnt_as" style="margin-top:10px" value="auth_fm_chk"/> 
    I have Password
    <div class="input-group gst_chk">  
     <input type="submit" class="btn btn-red" id="cntgyes" value="Continue as Guest">
    </div>
    <div class="sggn_in" style="display:none">
       <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
           <input type="password" class="form-control" id="password" name="password" placeholder="Password" data-original-title="" title="" />
             </div><br/>
                <div class="input-group">  
                  <input type="submit" class="btn btn-red" id="cntaurth" value="Sign In">
                  <span id="loading" style="display:none"><img src="<?php echo $dir; ?>img/2.gif" /> Please wait</span>
                  </div>
              </div>
</form>

My JQuery looks like as below:

$(document).ready(function(){ 
 $('input[type="radio"]').click(function(){
    if($(this).attr("value")=="auth_fm_chk"){
        $(".sggn_in").show();
        $(".gst_chk").hide();
    }
     if($(this).attr("value")=="cnt_as_guest"){
        $(".sggn_in").hide();
        $(".gst_chk").show();
    }
});
$("form#mychkform").submit(function(event) {
event.preventDefault();
validate();
  });
 function validate(){
   $('#cntgyes').click(function(){   
    function checkEmail(){
    var email = $("#email").val();
    if((email.length < 6) ||
     (email.indexOf('@',0) < 1) ||
     (email.lastIndexOf('@') != email.indexOf('@',0)) ||
     (email.lastIndexOf('@') > (email.length - 5)) ||
     (email.lastIndexOf('.') > (email.length - 3)) ||
     (email.lastIndexOf('.') < (email.length - 4)) ||
     (email.indexOf('..',0) > -1) ||
     (email.indexOf('@.',0) > -1) ||
     (email.indexOf('.@',0) > -1) ||
     (email.indexOf(',',0) > -1)){
         $("#email").css("border-color","#F05F68");
        return false;
    }
    else{
        $("#email").css("border-color","#0C9");
        return true;
    }   
}

if(!checkEmail()){
    return false;   
    }
    else{
        var email = $("#email").val();
        var dataString = 'email=' + email;
        $("#loading").show();
        $.ajax({
          url: "includes_fm/form_submi/checkou_guauth",
          type: "POST",
          data: dataString,
          success: function (msg) {
             $("#loading").hide();
               location.replace("checkout/guest_ckot?id_gst="+msg+"#pg2");
              }
       });
    }  
    $('#cntaurth').click(function(){      
      function checkEmail(){
        var email = $("#email").val();
        if((email.length < 6) ||
         (email.indexOf('@',0) < 1) ||
         (email.lastIndexOf('@') != email.indexOf('@',0)) ||
         (email.lastIndexOf('@') > (email.length - 5)) ||
         (email.lastIndexOf('.') > (email.length - 3)) ||
         (email.lastIndexOf('.') < (email.length - 4)) ||
         (email.indexOf('..',0) > -1) ||
         (email.indexOf('@.',0) > -1) ||
         (email.indexOf('.@',0) > -1) ||
         (email.indexOf(',',0) > -1)){
             $("#email").css("border-color","#F05F68");
            return false;
        }
        else{
            $("#email").css("border-color","#0C9");
            return true;
        }   
    }
            function checkPass(){
            var password = $("#password").val();
            if(password == 0){
                $("#password").css("border-color","#F05F68");
                return false;   
            }
            else{
                $("#password").css("border-color","#0C9");
                return true;    
            }
        }
    if(!checkEmail() || !checkPass()) {
        return false;   
    }
    else{
        var email = $("#email").val();var password = $("#password").val();
        var dataString = 'email=' + email + '&password=' + password ;
        $("#loading").show();
            $.ajax({
               url: "includes_fm/form_submi/login_submit",
               type: "POST",
               data: dataString,
               success: function (msg) {
                   if (msg == 1) {
                     $("#loading").hide();
                     window.location.reload();
                    } else {
                    $("#loading").hide();
                    $("#messagesuccerr").html("<span style=color:red;
                      font-size:14px>Oops!! Wrong Credentials!!</span>")
                     .fadeIn().delay(4000).fadeOut();
                   return false;
                  }
                }
         });
    }
});           
}); 

When i click submit button of Continue As Guest then i have to press button 2 times then form validates the field. But why 2 clicks are needed.

Same is happening on after validating the email field. Please assist.

Answer 1

• your validate function has many errors (such as unnecessary $('#cntaurth').click(function(){});).

• span id="loading" is in incorrect place.

• div id="messagesuccerr" is missing.

• and some other problems.

Fiddle with full code

validate function should look like:

function validate()
{
    if (!checkEmail())
    {
        return false;   
    }
    var isUser = $(".sggn_in").is(':visible');
    if (isUser)
    {
        if (!checkPassword())
        {
            return false;
        }
        var url = "includes_fm/form_submi/login_submit";
        var dataString = 'email=' + $("#email").val() + '&password=' + $("#password").val();
        makeRequest(url, dataString, successUserRequest);
    }
    else
    {
        var url = "includes_fm/form_submi/checkou_guauth";
        var dataString = 'email=' + $("#email").val();
        makeRequest(url, dataString, successGuestRequest);
    }
}

Answer 2

Can you try

    $("form#mychkform").submit(function(event) {    
    var flag = validate();
    if(!flag){
    event.preventDefault();
    }
   });

function validate(){

   var email = $("#email").val();
if((email.length < 6) ||
 (email.indexOf('@',0) < 1) ||
 (email.lastIndexOf('@') != email.indexOf('@',0)) ||
 (email.lastIndexOf('@') > (email.length - 5)) ||
 (email.lastIndexOf('.') > (email.length - 3)) ||
 (email.lastIndexOf('.') < (email.length - 4)) ||
 (email.indexOf('..',0) > -1) ||
 (email.indexOf('@.',0) > -1) ||
 (email.indexOf('.@',0) > -1) ||
 (email.indexOf(',',0) > -1)){
     $("#email").css("border-color","#F05F68");
    return false;
}
else{
    $("#email").css("border-color","#0C9");
    return true;
}   

}