我想驗證我的電子郵件字段在表格

嗨，大家好，請幫助我解決我的問題。其實我試圖驗證我的電子郵件領域的形式使用javascript和張貼ajax請求來檢查該電子郵件是否存在，但我的JavaScript函數不會等到ajax響應和每次它返回false。我想返回true，當電子郵件不存在...我想驗證我的電子郵件字段在表格

$(document).ready(function(){ 
    //global vars 
    var form = $("#signupForm"); 
    var email = $("#email"); 
    var email_error = $("#invalid"); 

    //On blur 
    // userEmail.blur(validateEmail); 

    //On Submitting 
    form.submit(function(){ 

     if(validateEmail()){ 
      alert("submit true"); 
      return true; 
     }else{ 
     alert("submit false"); 
      return false; 
      } 
    }); 


    function validateEmail(){ 
     //if it's NOT valid 
     alert("In email"); 
     var a = $("#email").val(); 
     var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 

     if(email.val() == ""){ 
      email_error.html("Please enter your email "); 
      return false; 
     } 
     //if it's valid email 
     else if(filter.test(a)==false){ 
      email_error.html("Please enter Valid email address"); 
      return false; 
     } 
     else if(filter.test(a)==true){alert("elseif"); 
     var baseUrl = '<?= base_url() ?>'; 

       $.ajax({ 
        type: "POST", 
        url: baseUrl+"index.php/index/validateUserEmail", 
        data: "useremail="+$("#email").val(), 
        success: function(msg){ 
        alert(msg); 
        if(msg == "1") 
         { 
          $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />'); 
          $("#emailValidate").val("1"); 
          email_error.html("This email-Id already exists!"); 
          return false; 
         } 
         else 
         { 

          $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />'); 
          $("#emailValidate").val("0"); 
          email_error.html(" "); 
          alert("alok"); 
          return true; 
         } 


        } 
       }); 

     } 

     else{ 
     email_error.html(" "); 
     return true; 
     } 

    } 
});

來源

2013-03-20 Salman Ahmad - Mean Developer

它不會像，因爲AJAX異步的工作性質，你需要使用一個回調來解決它 – 2013-03-20 11:48:14

嘗試設置選項異步：假在這裏： HTTP：// stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re – 2013-03-20 11:49:05

僅供參考，'async'在'v1.8'後不推薦使用 – asprin 2013-03-20 11:53:03

嘗試像

$(document).ready(function() { 
    // global vars 
    var form = $("#signupForm"); 
    var email = $("#email"); 
    var email_error = $("#invalid"); 

    // On blur 
    // userEmail.blur(validateEmail); 

    // On Submitting 
    form.submit(function() { 

       validateEmail(function(flag) { 
          if (flag) { 
           alert("submit true"); 
           form[0].submit(); 
          } else { 
           alert("submit false"); 
          } 

         }); 
       return false; 
      }); 

    function validateEmail(callback) { 
     // if it's NOT valid 
     alert("In email"); 
     var a = $("#email").val(); 
     var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 

     if (email.val() == "") { 
      email_error.html("Please enter your email "); 
      callback(false); 
     } 
     // if it's valid email 
     else if (filter.test(a) == false) { 
      email_error.html("Please enter Valid email address"); 
      callback(false); 
     } else if (filter.test(a) == true) { 
      alert("elseif"); 
      var baseUrl = '<?= base_url() ?>'; 

      $.ajax({ 
         type : "POST", 
         url : baseUrl + "index.php/index/validateUserEmail", 
         data : "useremail=" + $("#email").val(), 
         success : function(msg) { 
          alert(msg); 
          if (msg == "1") { 
           $("#tick_cross").fadeIn("slow") 
             .html('<img src="' + baseUrl 
               + 'images/cross.png" />'); 
           $("#emailValidate").val("1"); 
           email_error 
             .html("This email-Id already exists!"); 
           callback(false); 
          } else { 

           $("#tick_cross").fadeIn("slow") 
             .html('<img src="' + baseUrl 
               + 'images/tick.png" />'); 
           $("#emailValidate").val("0"); 
           email_error.html(" "); 
           alert("alok"); 
           callback(true); 
          } 

         } 
        }); 

     } 

     else { 
      email_error.html(" "); 
      callback(true); 
     } 

    } 
});

演示：Fiddle

或者更好的解決方案與jQuery.deferred

$(document).ready(function() { 
    // global vars 
    var form = $("#signupForm"); 
    var email = $("#email"); 
    var email_error = $("#invalid"); 

    // On blur 
    // userEmail.blur(validateEmail); 

    // On Submitting 
    form.submit(function() { 
       validateEmail().done(function() { 
          console.log("submit true"); 
          form[0].submit(); 
         }).fail(function() { 
          console.log("submit false"); 
         }); 
       return false; 
      }); 

    function validateEmail() { 
     var deferred = jQuery.Deferred() 

     // if it's NOT valid 
     console.log("In email"); 
     var a = $("#email").val(); 
     var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 

     if (email.val() == "") { 
      email_error.html("Please enter your email "); 
      deferred.reject(); 
     } 
     // if it's valid email 
     else if (filter.test(a) == false) { 
      email_error.html("Please enter Valid email address"); 
      deferred.reject(); 
     } else if (filter.test(a) == true) { 
      console.log("elseif"); 
      var baseUrl = '<?= base_url() ?>'; 

      $.ajax({ 
         type : "POST", 
         url : baseUrl + "index.php/index/validateUserEmail", 
         data : "useremail=" + $("#email").val(), 
         success : function(msg) { 
          alert(msg); 
          if (msg == "1") { 
           $("#tick_cross").fadeIn("slow") 
             .html('<img src="' + baseUrl 
               + 'images/cross.png" />'); 
           $("#emailValidate").val("1"); 
           email_error 
             .html("This email-Id already exists!"); 
           deferred.reject(); 
          } else { 

           $("#tick_cross").fadeIn("slow") 
             .html('<img src="' + baseUrl 
               + 'images/tick.png" />'); 
           $("#emailValidate").val("0"); 
           email_error.html(" "); 
           console.log("alok"); 
           deferred.resolve(); 
          } 

         } 
        }); 

     } 

     else { 
      email_error.html(" "); 
      deferred.resolve(); 
     } 

     return deferred.promise(); 
    } 
});

演示：Fiddle

來源

2013-03-20 11:51:58

你可以給出關於提交事件返回錯誤的解釋... – MatRt 2013-03-20 11:52:33

因爲我們不希望默認提交繼續，直到回覆回來 – 2013-03-20 11:54:19

哇謝謝你這麼多阿倫它工作很好..我正在減少時間浪費。。衷心感謝阿倫:) – 2013-03-20 12:01:01

問題是AJAX調用需要時間，但如果語句需要立即返回，那麼您就是這樣。我也不確定返回false是否足夠，我相信你需要捕獲事件並調用preventDefault（）方法...

最好的辦法是改變你的<輸入類型= 「提交」/>按鈕到<輸入類型=「按鈕」id =「submitButton」/>然後刪除您現在完全處理的form.submit()處理程序。補充一點：

$(function(){ 
    $('#submitButton').click(validateEmail) 

})

，然後添加$("#signupForm").submit()您validateEmail()功能：

function validateEmail(){ 
    //if it's NOT valid 
    alert("In email"); 
    var a = $("#email").val(); 
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 

    if(email.val() == ""){ 
     email_error.html("Please enter your email "); 
     return false; 
    } 
    //if it's valid email 
    else if(filter.test(a)==false){ 
     email_error.html("Please enter Valid email address"); 
     return false; 
    } 
    else if(filter.test(a)==true){alert("elseif"); 
    var baseUrl = '<?= base_url() ?>'; 

      $.ajax({ 
       type: "POST", 
       url: baseUrl+"index.php/index/validateUserEmail", 
       data: "useremail="+$("#email").val(), 
       success: function(msg){ 
       alert(msg); 
       if(msg == "1") 
        { 
         $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />'); 
         $("#emailValidate").val("1"); 
         email_error.html("This email-Id already exists!"); 
         return false; 
        } 
        else 
        { 

         $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />'); 
         $("#emailValidate").val("0"); 
         email_error.html(" "); 
         alert("alok"); 
         $("#signupForm").submit() // <--- HERE 
         return true; 
        } 


       } 
      }); 

    } 

    else{ 
    email_error.html(" "); 
    return true; 
    } 

}

你也許現在更得清理有點...

來源

2013-03-20 11:56:53

您需要設置的選項async：false

來源

2013-03-20 12:00:21

不良行爲花花公子 – MatRt 2013-03-20 12:01:49

你能解釋一下嗎？ – 2013-03-20 12:02:51

是的，請閱讀文檔：請注意，同步請求可能會暫時鎖定瀏覽器，並在請求處於活動狀態時禁用任何操作。從jQuery 1.8起，不贊成使用帶有jqXHR（$ .Deferred）的async：false;您必須使用成功/錯誤/完整回調選項，而不是jqXHR對象的相應方法，例如jqXHR.done（）或已棄用的jqXHR.success（）。 – 2013-03-20 12:02:57

我認爲你必須等到直到完成響應。 readyState的== 4

$.ajax({ 
        type: "POST", 
        url: baseUrl+"index.php/index/validateUserEmail", 
        data: "useremail="+$("#email").val(), 
        success: function(){ 

       }).done(function (msg) { 

alert(msg); 
        if(msg == "1") 
         { 
          $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />'); 
          $("#emailValidate").val("1"); 
          email_error.html("This email-Id already exists!"); 
          return false; 
         } 
         else 
         { 

          $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />'); 
          $("#emailValidate").val("0"); 
          email_error.html(" "); 
          alert("alok"); 
          return true; 
         } 


        } 
}) 
.fail(function() { alert("error"; 
return true; 
); });

來源

2013-03-20 12:23:01

我想驗證我的電子郵件字段在表格

回答

相關問題