Jquery 验证表单问题，同时拆分 2 个屏幕

我正在使用JQuery验证作为我的联系表单。这是一个单页表格。但现在它被分成 2 套。第一个集合有几个带有继续按钮的字段。然后第二组将通过继续按钮给出。继续 btn 验证没有问题。但它不会像最终提交 btn 那样发出警报。

你能帮我解决这个问题吗

我的标记

<form name="contact" id="contact" method="post" action="http://action.com">
  <div id="form-fields">
    <!-- Form Step One -->
    <div id="form_step1">
      <div class="form-row">
        <label class="request_label">Program of Interest</label>
        <select id="CurriculumID" name="CurriculumID">
          <option selected="selected" value="">What program would you like to study</option>
        </select>
        <br />
      </div>

      <div class="form-row">
        <label class="request_label">First Name</label>
        <input name="firstname" id="firstname" type="text" title="First Name" />
        <br />
      </div>
      <div class="form-row">
        <label class="request_label">Last Name</label>
        <input name="lastname" id="lastname" type="text" title="Last Name" />
        <br />
      </div>
      <!-- CLOSING (FIRST NAME AND LAST NAME) -->
      <div class="req_btn_wrapper">
        <a href="javascript:void(0)" id="next">
          <img src="images/next_btn.png">
        </a>
      </div>
    </div>
    <!-- Form Step Two -->
    <div id="form_step2">
      <a href="#" id="back-button"></a>
      <div class="form-row">
        <label class="request_label">Email</label>
        <input name="email" id="email" type="text" title="Email" />
        <br />
      </div>
      <div class="form-row">
        <div class="split-form-row">
          <label class="request_label">Phone</label>
          <input name="dayphone" id="dayphone" class="form_phone" type="text" onkeypress="return numbersonly(this, event)" title="Phone" />
          <br />
        </div>
        <div class="split-form-row">
          <label class="request_label">Zip Code</label>
          <input name="zip" id="zip" class="form_zip" type="text" title="Zip Code" />
          <br />
        </div>

        <div id="cityStateInput">
          <input name="city" id="city" type="text" title="City" placeholder="City" />
          <br />
          <select name="state" id="state">
            <option selected="selected" value="">Select a State:</option>
            <option value="N/A">Orange</option>
            <option value="N/A">lorem</option>
          </select>
          <br />
        </div>

      </div>
      <div class="form-row">
        <label class="request_label">Year</label>
        <select name="gradyear" id="gradyear">
          <option selected="selected" value="">Please Select</option>
          <option value="2017">2017</option>
          <option value="2016">2016</option>
          <option value="2015">2015</option>
          <option value="2014">2014</option>
        </select>
      </div>
      <!-- Radio -->
      <div class="radio_row">
        <p id="military" class="military_label">Are you working in the military?</p>
        <div class="radio_option">
          <input type="radio" name="verify" value="Yes"><span id="yes1" for="yes">Yes</span>
        </div>
        <div class="radio_option">
          <input type="radio" name="verify" value="No" checked="checked"><span id="no1">No</span> 
        </div>
      </div>
      <!-- Radio -->
      <div class="clear"></div>
      <!-- CLOSING CLEAR -->
      <div class="req_btn_wrapper">
        <input name="submit" id="submit" type="image" src="images/btn_submit_request.png" value="" />
      </div>
    </div>
</form>

我的 Js 脚本

// Validate signup form on keyup and submit
$("#contact").validate({
  ignore: ":hidden",
  onclick: false,
  onfocusout: false,
  onsubmit: true,
  onkeyup: false,
  onkeydown: false,
  rules: {
    // Insert fields from the form
    email: {
      email: true
    },
    zip: {
      minlength: 5,
      required: true,
      checkLabel: true,
      zipUS: true
    },
    city: {
      checkLabel: true,
      required: true
    },
    dayphone: {
      required: true,
      checkPhoneValue: true
    },
    state: {
      required: true
    },
    firstname: {
      required: true,
      checkLabel: true
    },
    lastname: {
      required: true,
      checkLabel: true
    },
  },
  messages: {
    // Place custom error messages
    CurriculumID: "Please select a program.",
    firstname: "Please enter your first name.",
    lastname: "Please enter your last name.",
    dayphone: "Please enter a valid phone number.",
    email: "Please enter a valid email address.",
    zip: "Please enter a valid Zip code.",
    gradyear: "Please select H.S. graduation year.",
    city: "Please enter your city.",
    state: "Please select your state."
  },
  // Error placement
  showErrors: function(errorMap, errorList) {
    try {
      if (submitted) {
        var summary = "Please fix the following: 'n'n";
        $.each(errorList, function() {
          summary += " - " + this.message + "'n";
        });
        alert(summary);
        submitted = false;
      }
      //this.defaultShowErrors();
    } catch (err) {
      Raven.captureException(err);
    }
  },
  invalidHandler: function(form, validator) {
    try {
      submitted = true;
    } catch (err) {
      Raven.captureException(err);
    }
  }
}); // END FORM VALIDATION

$(document).ready(function() {
  $('#form_step2').hide();
  var validateStep1 = function() {
    var isValid_1 = $('#CurriculumID').valid();
    var isValid_2 = $('#firstname').valid();
    var isValid_3 = $('#lastname').valid();
    if (isValid_1 && isValid_2 && isValid_3) {
      $('#form_step1').hide();
      $('#form_step2').show();
      return false;
    }
  }
  // Show step 2
  $('#next').click(function() {
    validateStep1();
  });
  $('#back-button').click(function() {
    $('#form_step1').show();
    $('#form_step2').hide();
  });
  // Check input value against inline label
  jQuery.validator.addMethod("checkLabel", function(value, element) {
    return this.optional(element) || value != element.title;
  }, "Please enter a value.");

})