Question

我正在使用jQuery的验证插件在进行Ajax调用之前验证表单，但由于某种原因，每次我提交表单时页面都会刷新。这是我的验证功能：

//Invite form validation
$("#inviteForm").validate({
//Rules for invite validation
rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            name: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            $.ajax({
            type: "POST",
            url: '/invite/process',
            data: $("#inviteForm").serialize(),
            datatype: "html",
            success: function(data, textStatus ,XHR) {
                $("#inviteModal").html(data);
                if(data.indexOf("Thank you") >= 0 ){
                    invites -=1;
                    $("#overlay").css("display", "none");
                    $("#inviteModal").fadeOut(5000);
                }
            }
            });
            return false;
        }
});

我把它放在$(document).ready里面，但是我没有发布整个内容，因为我还有其他一些功能。这是表格的代码：

<!--// MODAL: INVITE //-->
<div id="inviteModal" class="modal" style="display: none">
<script type="text/javascript" src="/includes/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var invites = <?php echo $user->getInvitesLeft(); ?>;
if(invites < 1){

$("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
}
else{
$("#inviteModal").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
   "<form id=\"inviteForm\" >"+
   "<p>Name: <input type=\"text\" name=\"name\"></p>"+
   "<p>Email: <input type=\"text\" name=\"email\"></p>"+
   "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>"+
   "</form>");
}

</script>
</div>

每当我提交表单时，它都会刷新页面而不执行Ajax调用，并将表单数据粘贴到URL上，例如？name = bobby＆amp; email = williamrump％40aol.com＆amp; submit = Invite。为什么可能在没有进行Ajax调用的情况下刷新页面，我可以做些什么来阻止它呢？

Answer 1

似乎是在尝试附加验证程序后创建表单。这是导致这种情况的少数几个原因之一：我会检查：

document.ready()围绕jQuery代码，以确保在创建后附加验证器事件。

如果您是通过JavaScript创建表单，请确保在附加验证程序事件之前执行代码。

检查JavaScript错误。他们可能会停止执行其余的JavaScript，并阻止它将验证程序事件附加到表单。

检查发送给验证程序的选项对象中的额外,。某些浏览器（如IE）可能会失败。

尝试在提交处理程序中添加console.log()，以查看是否有任何内容通过验证程序。

最后一分钟：看起来像我的第一个建议，问题的评论中也提供了问题。因此，您可以将其余部分作为此类问题的未来检查清单：）

Answer 2

这很有效。在创建表单之前添加jquery并验证js。

<!DOCTYPE html>
<html>
<body>
<div id="inviteModal" class="modal" style="display: block">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
var invites = 10;
if(invites < 1){

$("#inviteModal").html("You have no invites left. You can get more by increasing your score.");
}
else{
$("#inviteModal").html("<h2>Please enter the specified information for the friend you wish to invite. </h2>"+
   "<form id=\"inviteForm\" >"+
   "<p>Name: <input type=\"text\" name=\"name\"></p>"+
   "<p>Email: <input type=\"text\" name=\"email\"></p>"+
   "<p><input type=\"submit\" name=\"submit\" value=\"Invite\"></p>"+
   "</form><div id='test'></div>");
}

$("#inviteForm").validate({
//Rules for invite validation
rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
//Messages to print if validation fails
messages: {
            name: "Please provide your friend's name.",
            email: "We cannot contact your friend without a valid email address.",
        },
//What to do when validation succeeds
submitHandler: function(form) {
            //Form is valid, make Ajax call
            $.ajax({
            type: "POST",
            data: $("#inviteForm").serialize(),
            datatype: "html",
            complete: function(data, textStatus ,XHR) {
                var data_ = "Thank you";
                $("#inviteModal").html(data_);
                if(data_.indexOf("Thank you") >= 0 ){
                    invites -=1;
                    $("#overlay").css("display", "none");
                    $("#inviteModal").fadeOut(5000);
                }
            }
            });
            return false;
        }
});
</script>
</div>
</body>
<html>

JQuery验证插件保持刷新页面

2 个答案: