使用jQuery驗證電子郵件

Question

我有一個來自jQuery UI的模式對話框，當我按下按鈕時出現。下面是關於模態對話框jQuery代碼：

 $('#eb1').click(function(){ 
     $('#emailPost').submit(); 
     $("#emailModal").dialog('close'); 
    }); 

    $('#eb2').click(function(){ 
     $('#emailPost2').submit(); 
     $("#emailModal").validate({ 
     rules: { 
      emailAddress: { 
       required: true, 
       email: true 
      } 
     } 
     }).showErrors({"error": "Invalid Email!"}); 
     $("#emailModal").dialog('close'); 
    }); 

下面是顯示所有這一切的PHP：

echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost'>"; 
echo "<input type='hidden' value='" . $_SESSION["email"] . "' name='emailAddress'>"; 
echo "<input type='button' value='Email To Me' id='eb1'/>"; 
echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
echo "</form>"; 
echo "<h3>Or</h3>"; 
echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>"; 
echo "<label name='error'></label>"; 
echo "<input type='text' value='Enter an Email' class='required email' name='emailAddress' style='display: inline-block;'>"; 
echo "<input type='button' value='Email' id='eb2'/>"; 
echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
echo "</form>"; 

我知道的按鈕做工精細，以及他們提交完美，但後者的提交不分的驗證結果。我很新的jQuery，我如何使它顯示一個錯誤，如果無效，不提交，除非電子郵件有效？

Answer 1

在我看來，就像你打電話給$('#emailPost2').submit();在您致電驗證之前。這是否不會在驗證發生之前提交表單？

當我使用jQuery Validator插件時，我在$(document).ready()中聲明瞭驗證規則。也許你應該嘗試更早的聲明規則，而不是點擊按鈕。

如果動態創建的模式彈出，那麼你可以使用

$("#emailPost2").live(function() {validation rules}); 

從而創建窗體時它附加的驗證規則。

Answer 2

這是你正在使用的validate插件嗎？ http://jquery.bassistance.de/validate/demo/

如果是這樣，看起來你沒有正確的方式去做。

將按鈕更改爲鍵入「submit」，然後將validate（）調用掛接到document.ready中的emailPost（如果甚至需要）和「emailPost2」。

$(document).ready(function(){ 
    $("#emailPost2").validate({ 
     rules: { 
      emailAddress: { 
       required: true, 
       email: true 
      } 
     } 
     }).showErrors({"error": "Invalid Email!"}); 
}); 

查看該鏈接的源代碼中的一些示例。

Answer 3

$('#eb1').click(function(){ 
    $('#emailPost').submit(); 
    $("#emailModal").dialog('close'); 
}); 

$('#eb2').click(function(){ 
    $('#emailPost2').submit(function(){ 
     var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
     var address = $("#emailModal").val(); 
     if(reg.test(address) == false) { 
     alert('Invalid Email Address'); 
     return false; 
    } 
    else 
    { 
    return true; 
    } 
}); 

$("#emailModal").dialog('close'); 
});