J
jrheederApr 10, 2016
Morning,
I can see that you have jQuery Validate in the setup but cannot seem to get it to work with the multistep form. Any suggestions or examples of this working, I have a 5 step form.
regards,
Johan
PS here is the form
<form id="new_result_form" name="new_result_form" class="nobottommargin" action="" method="post" novalidate enctype="multipart/form-data">
<div id="processTabs">
<ul class="process-steps process-5 bottommargin clearfix">
<li>
<a href="#ptab1" class="i-circled i-bordered i-alt divcenter">1</a>
<h5>Race Point</h5>
</li>
<li>
<a href="#ptab2" class="i-circled i-bordered i-alt divcenter">2</a>
<h5>Result Date</h5>
</li>
<li>
<a href="#ptab3" class="i-circled i-bordered i-alt divcenter">3</a>
<h5>Members & Birds</h5>
</li>
<li>
<a href="#ptab4" class="i-circled i-bordered i-alt divcenter">4</a>
<h5>Race Results</h5>
</li>
<li>
<a href="#ptab5" class="i-circled i-bordered i-alt divcenter">5</a>
<h5>Race Report</h5>
</li>
</ul>
<div>
<div id="ptab1">
<div class="col_half">
<label for="race_point">Select the race point:</label>
<select id="race_point" class="form-control" data-width="100%" name="race_point" required>
<option value="">Please select a race point</option>
<?php
$sql= "SELECT * FROM <code>race_point</code> group by race_point";
$query= mysql_query($sql);
while($race_point= mysql_fetch_array($query))
{
?>
<option>
<?php echo $race_point['race_point'];?></option>
<?php } ?>
</select>
</div>
<div class="col_half col_last">
<label for="correct_section">Select the correct section:</label>
<select id="correct_section" class="form-control" data-width="100%" name="correct_section" required>
<option value="">Please select the correct section</option>
<?php
$sql= "SELECT * FROM race_point group by correct_section";
$query= mysql_query($sql);
var_dump($query);
while($correct_section= mysql_fetch_array($query))
{
?>
<option><?php echo $correct_section['correct_section']; ?></option>
<?php } ?>
</select>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="2" onclick="$('#new_result_form').valid()">Proceed</a>
</div>
<div id="ptab2">
<label for="">Select date of when the race was held:</label>
<input type="text" value="" name="race_date" class="form-control tleft today race_date" data-date-format = "dd/mm/yyyy" placeholder="DD/MM/YYYY" required>
<div class="line"></div>
<a href="#" class="button button-3d nomargin tab-linker" rel="1">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="3" onclick="$('#new_result_form').valid()">Next</a>
</div>
<div id="ptab3">
<div class="col_half">
<label for="members">Members:</label>
<input type="text" id="members" name="members" value="" class="form-control" required>
</div>
<div class="col_half col_last">
<label for="birds">Birds:</label>
<input type="text" id="birds" name="birds" value="" class="form-control" required>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin tab-linker" rel="2">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="4">Next</a>
</div>
<div id="ptab4">
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">1<sup>st</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="first_name">Owner Name:</label>
<input type="text" id="first_name" name="first_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="first_bird">Bird Number:</label>
<input type="text" id="first_bird" name="first_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="first_velocity">Velocity:</label>
<input type="text" id="first_velocity" name="first_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">2<sup>nd</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="second_name">Owner Name:</label>
<input type="text" id="second_name" name="second_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="second_bird">Bird Number:</label>
<input type="text" id="second_bird" name="second_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="second_velocity">Velocity:</label>
<input type="text" id="second_velocity" name="second_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">3<sup>rd</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="third_name">Owner Name:</label>
<input type="text" id="third_name" name="third_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="third_bird">Bird Number:</label>
<input type="text" id="third_bird" name="third_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="third_velocity">Velocity:</label>
<input type="text" id="third_velocity" name="third_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">4<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="fourth_name">Owner Name:</label>
<input type="text" id="fourth_name" name="fourth_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="fourth_bird">Bird Number:</label>
<input type="text" id="fourth_bird" name="fourth_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="fourth_velocity">Velocity:</label>
<input type="text" id="fourth_velocity" name="fourth_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">5<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="fifth_name">Owner Name:</label>
<input type="text" id="fifth_name" name="fifth_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="fifth_bird">Bird Number:</label>
<input type="text" id="fifth_bird" name="fifth_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="fifth_velocity">Velocity:</label>
<input type="text" id="fifth_velocity" name="fifth_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">6<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="sixth_name">Owner Name:</label>
<input type="text" id="sixth_name" name="sixth_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="sixth_bird">Bird Number:</label>
<input type="text" id="sixth_bird" name="sixth_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="sixth_velocity">Velocity:</label>
<input type="text" id="sixth_velocity" name="sixth_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">7<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="seventh_name">Owner Name:</label>
<input type="text" id="seventh_name" name="seventh_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="seventh_bird">Bird Number:</label>
<input type="text" id="seventh_bird" name="seventh_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="seventh_velocity">Velocity:</label>
<input type="text" id="seventh_velocity" name="seventh_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">8<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="eighth_name">Owner Name:</label>
<input type="text" id="eighth_name" name="eighth_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="eighth_bird">Bird Number:</label>
<input type="text" id="eighth_bird" name="eighth_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="eighth_velocity">Velocity:</label>
<input type="text" id="eighth_velocity" name="eighth_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">9<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="nineth_name">Owner Name:</label>
<input type="text" id="nineth_name" name="nineth_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="nineth_bird">Bird Number:</label>
<input type="text" id="nineth_bird" name="nineth_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="nineth_velocity">Velocity:</label>
<input type="text" id="nineth_velocity" name="nineth_velocity" value="" class="form-control" required>
</div>
<div class="line"></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-6 topmargin-sm">
<label for="">10<sup>th</sup> Place</label>
</div>
<div class="col-lg-3 col-sm-6">
<label for="tenth_name">Owner Name:</label>
<input type="text" id="tenth_name" name="tenth_name" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="tenth_bird">Bird Number:</label>
<input type="text" id="tenth_bird" name="tenth_bird" value="" class="form-control" required>
</div>
<div class="col-lg-3 col-sm-6">
<label for="tenth_velocity">Velocity:</label>
<input type="text" id="tenth_velocity" name="tenth_velocity" value="" class="form-control" required>
</div>
</div>
<div class="line"></div>
<a href="#" class="button button-3d nomargin tab-linker" rel="3">Previous</a>
<a href="#" class="button button-3d nomargin fright tab-linker" rel="5">Next</a>
</div>
<div id="ptab5">
<div class="col-md-12">
<label for="race_report">Race Report:</label>
<textarea id="race_report" name="race_report" value="" class="form-control" rows="10"></textarea>
</div>
<div class="col-md-12">
<label>Upload Media</label>
<input id="input-11" name="support_images[]" type="file" multiple class="file-loading" accept="video/*;capture=camcorder">
</div>
<div class="line"></div>
<button class="button button-3d btn-block" type="submit" name="new_result_submit" value="new">Post Result</button>
</div>
</div>
</div>
</form>