Jquery驗證表單問題，同時由2個屏幕分割

Question

我正在使用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."); 


}) 

Answer 1

你有幾個問題是可能打破了jQuery的預期行爲驗證插件...

$("#contact").validate({ 
    ignore: ":hidden", 
    onclick: false, 
    onfocusout: false, 
    onsubmit: true, // <- NEVER set to 'true' 
    onkeyup: false, 
    onkeydown: false, // <- No such thing 
    .... 

• 絕對沒有這種東西叫onkeydown。有關所有可用選項，請參閱the documentation。

• onsubmit選項不得設置爲true，因爲這會打破內置的onsubmit函數。該選項只能設置爲false或超越功能。如果您想保持默認的提交功能未被更改，那麼您必須從.validate()方法中刪除onsubmit選項。

參見：jqueryvalidation.org/validate/#onsubmit

「設置爲false，只使用其他事件進行驗證

設置爲一個函數自己決定何時運行驗證。

布爾值true不是有效值「。

---

將繼續BTN沒有問題，驗證。但它並沒有像最終提交btn一樣提供警報。

至於你的問題，你需要看看你的JavaScript錯誤控制檯。

ReferenceError: Can't find variable: submitted 

我刪除了if (submitted)條件內showErrors和你點 「下一步」 按鈕的工作......

DEMO：http://jsfiddle.net/vpgmnLg0/