jquery验证和ajax调用同时触发

Question

$("#submit-button").click(function() { 

     if($.trim($("#email").val()) === "") { 
      $(".error-message-email").show(); 
     } 
     if($.trim($("#password").val()) === ""){ 
      $(".error-message-password").show(); 
     } 
     return false; 
    }); 
    $("#submit-button").click(function() { 

    $.ajax({ 
    type:'POST', 
    url:" " , 
    data:{"email": email, "password": password}, 
    success:function(data) { 

     if(data["success"] === "True") { 
        // do something. 
       } else { 

      if(data["message"] === "Email already exists.") { 
       $(".error-message-email-exist").show(); 
      }  

       } 
    }, 
    dataType:"json" 
    }); 

    return false; 
    }); 

}); 

我有问题。如果发生错误，那么如何停止Ajax调用来触发。因为这里仍然是我的表单未能通过验证，所以ajax调用被触发。我想阻止它。

Answer 1

不要点击事件分开。

$("#submit-button").click(function() { 
    var error = false; 
    if($.trim($("#email").val()) === "") { 
     $(".error-message-email").show(); 
     error = true; 
    } 
    if($.trim($("#password").val()) === ""){ 
     $(".error-message-password").show(); 
     error = true; 
    } 

    if(!error) { 

      $.ajax({ 
       type:'POST', 
       url:" " , 
       data:{"email": email, "password": password}, 
       success:function(data) { 

        if(data["success"] === "True") { 
         // do something. 
        } else { 

        if(data["message"] === "Email already exists.") { 
         $(".error-message-email-exist").show(); 
        }  

        } 
       }, 
       dataType:"json" 
     }); 

    } 
    return false; 
}); 

Answer 2

像这样：

$("#submit-button").click(function() { 
     var error = false; 
     if($.trim($("#email").val()) === "") { 
      $(".error-message-email").show(); 
      error = true; 
     } 
     if($.trim($("#password").val()) === ""){ 
      $(".error-message-password").show(); 
      error = true; 
     } 
     if (!error) { 
      $.ajax({ 
       type:'POST', 
       url:" " , 
       data:{"email": email, "password": password}, 
       success:function(data) { 

        if(data["success"] === "True") { 
        // do something. 
        } else { 

        if(data["message"] === "Email already exists.") { 
         $(".error-message-email-exist").show(); 
        }  

       } 
      }, 
      dataType:"json" 
      }); 
     } 
     return false; 
    }); 

Answer 3

既然你已经绑定click两次，并写在第二个Ajax调用，则无论第一个开火。它是完全独立的。