jQuery + ajaxフォームの妥当性検査と捻挫による提出

Question

私は、電子メールを検証し、ajaxを使用してフォームを送信するためのjQuery関数を一緒に冠しました。これまでの検証機能は正常に動作しています（エラーメッセージが表示されます）

ユーザーが有効な電子メールを入力した場合、私は自分のajax関数を実行します。有効なメールが入力されると成功メッセージが表示されますが、これは必要ありません.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_.-]+@[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; 
    }); 
});​ 

Answer 1

あなたは以下の条件の両方真と偽の場合には

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_.-]+@[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; 
    }); 
}); 

Answer 2

私はまた

$('.success').show();後にその return false;の必要性を見ていない、あなたは適切にメールを渡しする必要があります。

data: {'email':email}, 

変数emailが適切に設定されている限り、

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

変数はローカルでのみ