验证表单并提交而不刷新答案

【问题标题】：Validate form and submit without refresh验证表单并提交而不刷新
【发布时间】：2012-12-08 12:11:31
【问题描述】：

我有一个需要验证的表单，我还需要在不刷新页面的情况下提交它。我能够获得一个表单来验证和提交，但页面刷新了。然后我能够获得一个无需提交的表单，但我无法进行验证。

我在这里查看了大量教程和帖子，我觉得这是正确的整体格式......我只是确定我错过了一些东西。

任何帮助将不胜感激！

这是我的脚本：

$(document).ready(function(){
            $("#addstudent").validate({
                debug: false,
                rules: {
                    studentid: "required",
                    teacher: "required",
                    assignment: "required",
                    date: "required",
                },
                messages: {
                    studentid: "Please enter the student's ID number.",
                    teacher: "Please enter your name.",
                    assignment: "Please select a tutoring assignment.",
                    date: "Please select a day.",
                },                 
                submitHandler: function(form) {

          $.ajax({
              url: 'add.php',
              type: 'POST',
              data: $("form.addstudent").serialize(),         
              success: function() {
            $("#studentid").val(""), $('#studentid').focus(), $('#results').load('addresults.php', function(){
                });

              }
          });

          return false;
       }
    });
    });

这是我的表单的代码：

<form name="addstudent" id="addstudent" action="" method="post">

    <fieldset><legend>Add student to tutoring list</legend>
    <div><label for="studentid">ID number</label><input type="text" name="studentid" id="studentid"></div>

    <div><label for="day">Date</label><select name="date" id="date">
    <option value="">Please select a day</option>
    <option value="mon">Monday <? echo $monday; ?></option>
    <option value="tue">Tuesday <? echo $tuesday; ?></option>
    <option value="wed">Wednesday <? echo $wednesday; ?></option>
    <option value="thu">Thursday <? echo $thursday; ?></option>
    <option value="fri">Friday <? echo $friday; ?></option>
    </select></div>

    <div><label for="assignment">Tutoring assignment</label><select name="assignment" id="assignment">
    <option value="">Please select an assignment</option>
    <option value="att">Activity Time</option>
    <option value="acc">ACC</option>
    <option value="tech">ACC Tech </option>
    <option value="ast">After School</option>
    </select></div>

    <div><label for="teacher">Assigning teacher</label><input type="text" name="teacher" id="teacher"></div>

    <input type="submit" name="submit" value="submit">
    </fieldset>
    </form>

编辑：第一次编辑（现已删除）极大地改变了问题。对造成的任何挫折表示歉意。下面选择的答案本身就解决了此表单的问题。

【问题讨论】：

拦截表单提交事件：jQuery Submit
将表单从 Post 转换为 onclick。让 onclick 调用 jquery
我希望你也在验证服务器端
这不正确：$("form.addstudent").serialize() 因为addstudent 是id，而不是class。试试：$("form#addstudent").serialize()，或者只是("#addstudent").serialize()。
OP，如果你注释掉对.load的调用，你还会看到页面刷新吗？

标签： php jquery forms jquery-validate

【解决方案1】：

您将class 与id 混淆了。你的表格是：

<form name="addstudent" id="addstudent" action="" method="post">

但是你通过class定位它：

data: $("form.addstudent").serialize(),

什么时候应该被id定位：

data: $("form#addstudent").serialize(),

或更简洁：

data: $("#addstudent").serialize(),

Working Demo:

http://jsfiddle.net/5UqRm/2/

请注意，没有什么是令人耳目一新的。

【讨论】：

这会导致问题吗？我不熟悉验证插件，但如果 submitHandler 在数据验证后运行，我希望 ajax 提交即使使用 $("form.addstudent") 也能正常工作，只是 POST 数据为空。
@Emily，因为如果选择器不正确，有时.validate() 根本不起作用。在小提琴上工作。
但是在您刚刚发布的小提琴中，当我将其更改为data: $("form.addstudent").serialize() 时，它似乎仍然有效（不刷新）。你也看到这种行为吗？我正在查看 validate 插件源，但我还没有看到它怎么可能知道 $("form.addstudent") 是一个问题，因为没有抛出异常：从插件的角度来看，它似乎应该是一样的，就好像函数中有data: []。
@Emily，是的，在这种情况下，不正确的选择器不会导致刷新......在我的编辑中也得到了承认。虽然，不正确的选择器不会导致提交任何内容。
啊。有趣的是，我前几天刚读到这个……meta.stackexchange.com/questions/43478/…

【解决方案2】：

像以前一样设置表单规则和验证，但不包括 submitHandler。我并不是说它有什么问题，但我知道如何做你想做的事：

$("form.addstudent").submit(HandleSubmit);
    function HandleSubmit(e) {
    e.preventDefault();
    $.ajax({
        url: 'add.php',
        type: 'POST',
        data: $("form.addstudent").serialize(),
        success: function () {
            $("#studentid").val(""), $('#studentid').focus(), $('#results').load('addresults.php', function () {
            });

        }
    });
}

Here is the Fiddle

【讨论】：

这并不能解决任何问题，因为内置的submitHandler:绝对没有问题
它将解决停止表单的默认行为，即提交。这是他想要阻止的……
那他为什么在里面发帖说还是很爽呢？
因为如果语法不正确，.validate() 有时会中断。
See this fiddle. 当return false 在submitHandler: 中正确使用时，什么都不会刷新。其他原因导致刷新。

【解决方案3】：

我已经尝试过您的代码，它运行良好，只进行了一次修改：

data: $("#addstudent").serialize()

你有没有return false没有区别。

我不知道你想在你的 submitHandler 的 ajax 成功处理程序中实现什么：

`$('#results').load('addresults.php', function(){});`

为什么不回显 add.php 的一些输出并通过将 .done(function(data){} 添加到您的 $.ajax({}) 来使用它？

...您的示例不包括 #results 元素，所以也许这会导致您刷新？例如如果你有<body id="results"> :-) !!

【讨论】：

我在表单下方确实有一个 div，它是 #results 用于显示 addresults.php 的结果。我有 $('#results').load('addresults.php', function(){}); 部分来加载结果，因为我没有不知道如何使用您提到的 .done(function(data){}。