multipage form with jquery and php validation - php

Question

I am working with a multipage form, needs to validate in each page. jquery validating well, but i have to post the data in the same page through ajax to backend for php validation and if return success needs to load the next page or else need to show validation error from backend to front end.
The problem is, here the form is getting validated well in frontend but not posting data for backend validation what i am doing wrong in the code please advice. Thanks in advance
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);