使用jquery和php验证的多页形式

Question

我正在使用多页表单，需要在每个页面中进行验证。 jquery验证很好，但是我必须通过ajax将数据发布到同一页面到后端进行php验证，如果返回成功需要加载下一页，或者需要从后端到前端显示验证错误。

问题是，这里的表单在前端得到了很好的验证，但没有发布后端验证数据我在代码中做错了请建议。提前致谢

HTML

<form class="ui form segment" id="msform" action="main.php" method="post">
  <ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Career Details</li>
    <li>Personal Details</li>
  </ul>
<fieldset class="step">
  <div class="two fields">
    <div class="field">
      <label>First name</label>
      <input placeholder="First Name" name="first_name" type="text">
    </div>
    <div class="field">
      <label>Last name</label>
      <input placeholder="Last Name" name="last_name" type="text">
    </div>
  </div>

   <div class="two fields">
    <div class="field">
      <label>Display name</label>
      <input placeholder="Display Name" name="display_name" type="text">
    </div>
    <div class="field">
      <label>User name</label>
      <input placeholder="User Name" name="user_name" type="text">
    </div>
  </div>

   <div class="two fields">
    <div class="field">
      <label>Email</label>
      <input placeholder="Email" name="email" type="text">
    </div>
    <div class="field">
      <label>Password</label>
      <input type="password" placeholder="Password" name="password" type="text">
    </div>
  </div>

  <div class="two fields">
    <div class="field">
      <label>Date of birth</label>
        <div class="ui calendar" id="date_birth">
          <div class="ui input left icon">
            <i class="calendar icon"></i>
            <input type="text"  placeholder="Date" name="dob">
          </div>
        </div>
    </div>
    <div class="field">
      <label>Gender</label>
      <div class="ui selection dropdown">
        <input name="gender" type="hidden">
        <div class="default text">Gender</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="1">Male</div>
          <div class="item" data-value="0">Female</div>
        </div>
      </div>
    </div>
  </div>

    <div class="field">
      <label>Marital status</label>
      <div class="ui selection dropdown">
        <input name="marital_status" type="hidden">
        <div class="default text">Marital status</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="married">Married</div>
          <div class="item" data-value="single">Single</div>
        </div>
      </div>
    </div>
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>


<fieldset class="step">
  <div class="two fields">
    <div class="field">
      <label>Highest qualification</label>
      <input placeholder="Highest qualification" name="highest_qualification" type="text">
    </div>
    <div class="field">
      <label>University/college</label>
      <input placeholder="University/college" name="university_or_college" type="text">
    </div>
  </div>

   <div class="two fields">
    <div class="field">
      <label>Course type</label>
      <div class="ui selection dropdown">
        <input name="course_type" type="hidden">
        <div class="default text">Course type</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="1">Full time</div>
          <div class="item" data-value="0">Part time</div>
        </div>
       </div>
      </div> 
    <div class="field">
      <label>Mobile</label>
      <input placeholder="Mobile" name="mobile" type="text">
    </div>
  </div>

    <div class="field" id="container">
      <label>Upload resume</label>
      <label for="file" class="ui icon button">
        <i class="file icon"></i>
        <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
           <a id="pickfiles" href="javascript:;">Select resume</a> <br />
        </label>
      <input type="file" id="file" style="display:none">
        <a id="uploadfiles" href="javascript:;">Upload</a>
    </div>
    <div class="field" id="container">
      <label>Upload photo</label>
        <label for="file" class="ui icon button">
        <i class="file icon"></i>
        <div id="filelist_new">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
        <a id="pickfiles_new" href="javascript:;">Select photo</a> 
        </label>
    <a id="uploadfiles_new" href="javascript:;">Upload</a>
    <input type="file" id="file" style="display:none">
    </div>

  <div class="two fields">
    <div class="field">
      <label>Current designation</label>
      <input placeholder="Current designation" name="current_designation" type="text">
    </div>
    <div class="field">
      <label>Current company</label>
      <input placeholder="Current company" name="current_company" type="text">
      </div>
    </div>

  <div class="two fields">
    <div class="field">
      <label>Annual salary</label>
      <div class="ui selection dropdown">
        <input name="annual_salary" type="hidden">
        <div class="default text">annual_salary</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="0">Less than 1 Lakh</div>
          <div class="item" data-value="1">1 to 2 Lakh</div>
          <div class="item" data-value="2">2 to 3 Lakh</div>
          <div class="item" data-value="3">3 to 4 Lakh</div>
          <div class="item" data-value="4">5 Lakh and above </div>
        </div>
       </div>
    </div>
    <div class="field">
      <label>Working since</label>
        <div class="ui calendar" id="date_work">
          <div class="ui input left icon">
            <i class="calendar icon"></i>
              <input placeholder="Working since" name="working_since" type="text">
          </div>
        </div>
      </div>
    </div>
  <div class="two fields">
    <div class="field">
      <label>Current location</label>
      <input placeholder="Current location" name="current_location" type="text">
    </div>
    <div class="field">
      <label>Duration of notice</label>
      <div class="ui selection dropdown">
        <input name="duration_of_notice" type="hidden">
        <div class="default text">Duration of notice</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="0">Less than 15 days</div>
          <div class="item" data-value="1">15 days to 1 month</div>
          <div class="item" data-value="2">1 to 2 month</div>
        </div>
       </div>
    </div>
    </div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset class="step">
  <div class="two fields">
    <div class="field">
      <label>Skills</label>
      <input placeholder="Skills" name="skills" type="text">
    </div>
    <div class="field">
      <label>Passing year</label>
        <div class="ui calendar" id="example8">
            <div class="ui input left icon">
              <i class="time icon"></i>
              <input type="text" name="passing_year" placeholder="Year">
            </div>
          </div>
    </div>
  </div>

   <div class="two fields">
    <div class="field">
      <label> Present address</label>
      <input placeholder="Present address" name="address_1" type="text">
    </div>
    <div class="field">
      <label> Permanent address</label>
      <input placeholder="Permanent address" name="address_2" type="text">
    </div>
  </div>

   <div class="two fields">
    <div class="field">
      <label>City</label>
      <input placeholder="City" name="city" type="text">
    </div>
    <div class="field">
      <label>State</label>
      <input placeholder="State" name="state" type="text">
    </div>
  </div>

   <div class="two fields">
    <div class="field">
      <label>Country</label>
      <input placeholder="Country" name="country" type="text">
    </div>
    <div class="field">
      <label>Certifications</label>
      <input placeholder="Certifications" name="certifications" type="text">
    </div>
  </div>
    <div class="field">
      <label>Will relocate  </label>
      <div class="ui selection dropdown">
        <input name="will_relocate" type="hidden">
        <div class="default text">Will relocate</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="0">Yes</div>
          <div class="item" data-value="1">No</div>
        </div>
       </div>
    </div>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit"  class="submit action-button" value="Submit" />
</fieldset>
</form>

的jQuery

    $(document).ready(function(){
    var current = 1;

    widget      = $(".step");
    btnnext     = $(".next");
    btnback     = $(".previous"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
    current_fs = $(this).parents();
    next_fs = $(this).parent().widget;
        if(current < widget.length){
            // Check validation
            if($(".form").valid()){
                dataString = [];
                $('#msform').ajaxForm({
                type: "POST",
                url: "main.php",
                data:{data: $(dataString).serializeArray()}, 
                dataType: "json",
                cache: false,
                  });
                widget.show();
                $("#progressbar li").eq($("fieldset").index(setProgress(current))).addClass("active");
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);

            }
        }
        hideButtons(current);
    })

    // Back button click action
    btnback.click(function(){
    current_fs = $(this).parent();
    previous_fs = $(this).parent().btnback;
        if(current > 1){
            current = current - 2;
            if(current < widget.length){
                $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })
    // Submit button click
    btnsubmit.click(function(){
        dataString = [];
        $('#msform').ajaxForm({
        type: "POST",
        url: "main.php",
        data:{data: $(dataString).serializeArray()}, 
        dataType: "json",
        cache: false,

        success: function(){
          alert("You have submitted form successfully");
        //    $("form")[0].reset();
        }
    });
    });



    $('#msform').validate({ // initialize plugin
        ignore:":not(:visible)",            
        rules: {
            first_name : { required: true, minlength: 3},
            last_name  : "required",
            display_name  : { required: true, minlength: 3},
            user_name  : { required: true, minlength: 3},
            email: {
                    required: true,
                    email: true
                  },           
            password: {
                    required: true,
                    minlength: 5
                  },
            dob : {
                     required: true,
                   },            
            gender  : "required",
            marital_status: "required",
            highest_qualification:"required",
            university_or_college: "required",
            mobile:{
              required:true,
              minlength:10,
              maxlength:10,
              number: true
              },        
            current_designation:"required",
            current_company:"required",
            annual_salary:"required",
            working_since:"required",
            current_location:"required",
            duration_of_notice:"required",
            skills:"required",
            address_1:"required",
            city:"required",
            state:"required",
            country:"required",
            certifications:"required",
          },
    });

});

// Change progress bar action
setProgress = function(currstep){
    current_fs = $(this).parent();
    next_fs = $(this).parent().btnnext;
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar").css("width",percent+"%").html(percent+"%");      
    $("#progressbar li").eq($(".step").index(current_fs)).removeClass("active");
}

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();
    if(current > 1) btnback.show();
    if (current == limit) { 
        btnnext.hide(); 
        btnsubmit.show();
    }
}

PHP

$post_data = $_POST;

print_r($post_data);