使用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'); 
});