多步形式与验证

Question

我在我的一个网站上的bootstrap上完成了一个多步骤表单。但是，我想实现表单验证。 我也试过添加必需的和jQuery验证插件，但似乎没有任何工作。 验证应检查所有输入，电子邮件，日期和下拉字段。请解释一下如何做到。

HTML表单：

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