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

$('#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');
 });

Answer 2

在我看来你打电话给$('#emailPost2').submit();在你打电话验证之前。在验证发生之前，这不会提交您的表格吗？

当我使用jQuery Validator插件时，我在$(document).ready()中声明了验证规则。也许您应该先尝试声明规则，而不是按下按钮。

如果动态创建模态弹出窗口，则可以使用

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

以便在创建表单时附加验证规则。

Answer 3

这是你正在使用的验证插件吗？ http://jquery.bassistance.de/validate/demo/

如果是这样的话，看起来你并没有以正确的方式解决这个问题。

将按钮更改为type =“submit”，然后将validate（）调用连接到emailPost'（如果需要的话）和document.ready中的'emailPost2'。

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

在某些示例中，请查看该链接中的源代码。

使用jQuery验证电子邮件

3 个答案: