验证表单并在不刷新页面的情况下提交

Question

我有一个需要验证的表单，也需要在不刷新页面的情况下提交。我已经成功完成了表单的验证和提交，但是页面却被刷新了。然后我又能够在不刷新页面的情况下提交表单，但是无法实现验证。

我看了很多教程和帖子，在这里感觉这是正确的总体格式...只是肯定错过了什么东西。

非常感谢任何帮助！

以下是我的脚本：

$(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>

编辑: 第一次编辑（现已删除）大幅改变了问题。对此造成的任何困扰表示歉意。下面选择的答案解决了这个表单本身的问题。

- Austin Dennis

---

拦截表单提交事件：jQuery Submit - random_user_name

将表单从Post方式改为onclick方式。使得onclick调用jQuery。 - ROY Finley

我希望你也在服务器端进行验证。 - user557846

这不正确：$("form.addstudent").serialize()，因为addstudent是一个id，而不是一个class。请尝试：$("form#addstudent").serialize()，或者只需("#addstudent").serialize()。 - Sparky

抱歉，那是我的错，因为我太无知了。我只是假设它是表单，并且没有想到要测试表单本身，直到所有的评论都表明这个表单可以通过一些小的调整来工作。请原谅我。我应该发起另一个问题吗？我是第一次在stackoverflow上发布问题，不想让礼仪出现更多的错误。 - Austin Dennis

Answer 1

你把 class 和 id 搞混了。你的表单是：

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

但你是通过 class 进行定位的：

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

当应该通过id进行定位时：

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

更简洁地说：

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

工作演示：

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

请注意，没有任何内容在刷新。

- Sparky

---

这会导致问题吗？我不熟悉验证插件，但如果submitHandler在数据验证后运行，我期望ajax提交即使使用$("form.addstudent")也能正常工作，除了POST数据为空。 - Emily

但是在你刚刚发布的fiddle中，当我将其更改为data: $("form.addstudent").serialize()时，它似乎仍然可以正常工作（不刷新）。你也注意到这种行为了吗？我正在查看验证插件的源代码，但我还没有看到它如何能够知道$("form.addstudent")是一个问题，因为没有抛出任何异常：从插件的角度来看，它似乎应该与函数中有data: []的情况相同。 - Emily

@Emily，是的，在这种情况下，不正确的选择器并没有导致刷新...这也在我的编辑中得到了确认。尽管如此，不正确的选择器会导致未提交任何内容。 - Sparky

是的，这应该与使用 data: [] 提交相同。不过这个刷新仍然非常神秘，因为我看不到为什么不能在 POST 请求的成功回调中调用 .load。请参见 http://jsfiddle.net/etDhd/。 - Emily

啊，有趣，我就在前几天读到这个... http://meta.stackexchange.com/questions/43478/exit-strategies-for-chameleon-questions - Emily

Answer 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 () {
            });

        }
    });
}

这里是 Fiddle

- DeeDub

---

这不会解决任何问题，因为内置的 submitHandler: 完全没有任何问题。 - Sparky

它将解决表单的默认行为，即提交操作。这正是他想要阻止的... - DeeDub

因为如果语法有误，.validate() 有时会出现错误。 - Sparky

请查看这个fiddle。当在submitHandler:中正确使用return false时，没有任何刷新。其他原因导致了刷新。 - Sparky

@Sparky，明白了，这个方法很好用。我想我可能会开始使用这样的方法，而不是事件附加。感谢您提供的信息！ - DeeDub

Answer 3

我已经尝试了你的代码，它运行良好，只需要做一个修改：

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

无论你是否有 return false 都没有影响。

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

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

为什么不从 add.php 回显一些输出，并通过在你的 $.ajax({}) 中添加 .done(function(data){}) 来使用它呢？

... 你的示例中没有包括 #results 元素，所以也许这导致了刷新？例如，如果你有 :-) !!

- Coder

---

我在表单下面有一个名为#results的div，用于显示addresults.php的结果。我使用$('#results').load('addresults.php', function(){});来加载结果，因为我不知道如何使用你提到的.done(function(data){})。 - Austin Dennis