Question

I have a form that I need to validate, and I also need it to submit without refreshing the page. I was able to get a form to validate and submit, but the page refreshed. And then I was able to get a form to submit without, but I couldn’t get validation to work.

I’ve looked at a ton of tutorials and posts on here, and I feel like this is the right overall format…I’m just sure I’m missing something.

Any help would be greatly appreciated!

Here is my script:

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

And here is the code for my form:

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

EDIT: First edit (now deleted) dramatically changed the question. Apologies for any frustration that caused. Answer selected below solved the problem with this form in and of itself.

Answer 1

You’ve mixed up class with id. Your form is:

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

But you targeted it by class:

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

when it should be targeted by id:

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

or more concisely:

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

Working Demo:

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

Notice that nothing is refreshing.