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>

编辑：首次修改（现已删除）显着改变了问题。对所造成的任何挫折表示歉意。下面选择的答案解决了这种形式的问题。

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(),

Working Demo:

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

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

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

        }
    });
}

Here is the Fiddle

Answer 3

我已经尝试过你的代码并且它运行正常，只有一个修改：

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

无论您是否拥有return false，都没有区别。

我不知道你在submitHandler的ajax的成功处理程序中有这个想要实现的目标：

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

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

...您的示例不包含#results元素，因此可能导致您刷新？例如如果你有<body id="results"> :-) !!

验证表单并提交而不刷新

3 个答案: