I have a multi-step form done on bootstrap working on one of my website. However, I want to implement the form validation. I have tried adding required and jQuery validate plugin as well, but nothing seems to be working. The validation should check for the all the input, email, date and dropdown fields. Please explain how it can be done.
HTML Form:
<form id="regiration_form" action="contact.php" method="post">
<fieldset>
<!-- <h2> Step 1: Add Personnel Details</h2> -->
<div class="input-field">
<input type="text" name="name" minlength="3" class="validate" id="name" required="">
<label for="name">Name</label>
</div>
<div class="input-field">
<input id="phone" type="tel" name="phone" class="validate" required="">
<label for="phone">Phone Number</label>
</div>
<div class="input-field">
<label class="sr-only" for="email">Email</label>
<input id="email" type="email" name="email" class="validate" >
<label for="email" data-error="wrong" data-success="right">Email</label>
</div>
<div class="input-field">
<select name="country" id="country" required="">
<option selected="" disabled="">Which country do you want to migrate to?</option>
<option value="Australia">Australia</option>
<option value="Canada">Canada</option>
<option value="US EB5">US EB5</option>
</select>
</div>
<div class="input-field">
<div class="alert alert-danger" id="error" style="display: none;">Please fill in the complete form</div>
</div>
<!-- <input type="button" name="previous" class="previous btn btn-default" value="Previous" /> -->
<input type="button" name="next" class="next btn purplish" value="Next" />
</fieldset>
<fieldset>
<div class="input-field">
<label class="sr-only" for="date">Date</label>
<input id="date" name="date" placeholder="DD/MM/YYYY" type="text" required="" />
</div>
<!-- <h2>Step 2: Contact Information</h2> -->
<div class="input-field">
<select name="education" id="education">
<option selected disabled="">Highest Level of Education:</option>
<!-- <option value="High School">High School</option> -->
<option value="3 Years Diploma">3 Years Diploma</option>
<option value="Bachelor Degree">Bachelor's Degree</option>
<option value="Master Degree">Master's Degree</option>
<option value="Doctorate Degree">Doctorate Degree</option>
</select>
</div>
<div class="input-field">
<select name="years" id="years">
<option selected disabled="">Number of years of work experience:</option>
<option value="1 Year">Less than 1 year</option>
<option value="1 - 3 Years">1- 3 Years</option>
<option value="3 - 5 Years">3 - 5 Years</option>
<option value="5 - 7 Years">5 - 7 Years</option>
<option value="7+ Years">7+ Years</option>
</select>
</div>
<p class="text-danger text-left" style="font-size: .8em; line-height: 1.5">Minimum education level required to qualify for immigration is a Bachelors Degree. <br> Please do not submit if your education level is lower than this.</p>
<input type="button" name="previous" class="previous btn purplish" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" id="submit_data" />
</fieldset>
</form>
jQuery:
var current = 1,current_step,next_step,steps;
var error = $("#error");
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
});