jquery + ajax表單驗證和提交扭曲

我拼湊了一個jQuery函數來驗證電子郵件和使用Ajax提交表單。到目前爲止驗證功能工作正常（給我錯誤信息）jquery + ajax表單驗證和提交扭曲

但是，如果用戶輸入有效的電子郵件，我希望我的ajax函數運行（它已經是seutp）。現在，當輸入有效的電子郵件時，我收到了成功消息，但我不需要它 - 只需要運行ajax。我嘗試刪除成功味精，它有越野車。

簡而言之，電子郵件驗證工作和ajax獨立工作 - 我需要他們一起工作。有點像：如果出現錯誤，請顯示錯誤消息，但如果電子郵件已驗證，請運行ajax。

而且，這裏的的jsfiddle - http://jsfiddle.net/NjDeb/

$(document).ready(function() { 

    $('.error').hide(); 
    $('.success').hide(); 

    $('input#email').css({backgroundColor:"#FFFFFF"}); 
    $('input#email').focus(function(){ 
    $(this).css({backgroundColor:"#FFDDAA"}); 
    $('.success').hide(); 
    $('.error').hide(); 
    }); 
    $('input#email').blur(function(){ 
    $(this).css({backgroundColor:"#FFFFFF"}); 
    }); 

    $(".submit_button").click(function() { 

     function validateEmail(email) { 
     var email = $("input#email").val();   
     var filter = /^[a-zA-Z0-9_.-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{0,4}$/; 
     if(filter.test(email)) 
     { 
     return true; 
     } 
     else 
     { 
     return false; 
     } 
    }  

     if(!validateEmail('email')) 
     { 
     $('.error').show(); 
     return false; 
     } 
     else 
     { 
     $('.success').show(); 
     return false;   
     } 

     $.ajax({ 
      type: "POST", 
      url: "process.php", 
      data: email, 
      success: function() { 
     $('#signup').html("<div id='message'></div>"); 
     $('#message').html("<h3>You're signed up. Look for an invite from us soon.</h3>") 
     .css({color:"#FFFFFF", fontFamily: "Exo, sans-serif", fontSize: "18px", marginTop: "10px", marginRight: "200px", fontWeight:"500"}) 
     .hide() 
     .fadeIn(1500, function() { 
      $('#message').append(""); 
     }); 
     } 
    }); 
    return false; 
    }); 
});

來源

2012-04-03 chowwy

您是在以下條件返回兩個真假的情況下

if(!validateEmail('email')) 
{ 
    $('.error').show(); 
    return false; 
} 
else 
{ 
    $('.success').show(); 
    return false;   
}

這樣的功能會不會在這之後執行，和檢查data: $("input#email").val()此前有是email變量，這是超出範圍。

所以不喜歡以下

$(document).ready(function() { 

    $('.error').hide(); 
    $('.success').hide(); 

    $('input#email').css({backgroundColor:"#FFFFFF"}); 
    $('input#email').focus(function(){ 
    $(this).css({backgroundColor:"#FFDDAA"}); 
    $('.success').hide(); 
    $('.error').hide(); 
    }); 
    $('input#email').blur(function(){ 
    $(this).css({backgroundColor:"#FFFFFF"}); 
    }); 

    $(".submit_button").click(function() { 

     function validateEmail(email) { 
     var email = $("input#email").val();   
     var filter = /^[a-zA-Z0-9_.-][email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{0,4}$/; 
     if(filter.test(email)) 
     { 
     return true; 
     } 
     else 
     { 
     return false; 
     } 
    }  

     if(!validateEmail('email')) 
     { 
     $('.error').show(); 
     return false; 
     } 

     $('.success').show(); 


     $.ajax({ 
      type: "POST", 
      url: "process.php", 
      data: $("input#email").val(), 
      success: function() { 
     $('#signup').html("<div id='message'></div>"); 
     $('#message').html("<h3>You're signed up. Look for an invite from us soon.</h3>") 
     .css({color:"#FFFFFF", fontFamily: "Exo, sans-serif", fontSize: "18px", marginTop: "10px", marginRight: "200px", fontWeight:"500"}) 
     .hide() 
     .fadeIn(1500, function() { 
      $('#message').append(""); 
     }); 
     } 
    }); 
    return false; 
    }); 
});

來源

2012-04-03 18:05:39

謝謝。看了一會之後，我甚至沒有注意到這一點。 Upvoted和選擇。 – chowwy 2012-04-03 18:12:52

我看不到的，需要的是return false;後$('.success').show();

此外，你應該好好的傳遞電子郵件：

data: {'email':email},

只要變量email已被正確設置在某個地方：

function validateEmail(email) { 
     var email = $("input#email").val(); 
... 
}

聲明變量只能在本地

來源

2012-04-03 17:41:49 keystorm

jquery + ajax表單驗證和提交扭曲

回答

相關問題