jQuery驗證驗證但未提交

Question

我一直在看這個問題的幾十個不同版本，並嘗試幾十個不同的建議，但我無法得到這個工作。

我正在使用jQuery驗證來驗證我的表單。如果我在沒有填寫表單的情況下點擊提交按鈕，則會標記所有必填字段並顯示正確的消息。所以，我知道驗證是否工作。

但是，如果我填寫所有字段並點擊提交，則什麼都不會發生。我沒有得到控制檯消息或錯誤。我添加了一個警報，但是也沒有觸發。

我的形式如下：

<form id="sportsAppRequest" name="sportsAppRequest" action="https://childrenshospital.secure.force.com/HC4__WebFormProcessor" method="post"> 
     <input type="hidden" class="reference" id="HC4__Inquiry__c.RecordTypeId" name="HC4__Inquiry__c.RecordTypeId" value="012G00000010652IAA" /> 
     <input type="hidden" class="picklist" id="HC4__Inquiry__c.HC4__Status__c" name="HC4__Inquiry__c.HC4__Status__c" value="Open" /> 
     <input type="hidden" class="string" id="HC4__Inquiry__c.HC4__Subject__c" name="HC4__Inquiry__c.HC4__Subject__c" value="Sports Med App Appointment Request" /> 
     <input type="hidden" class="picklist" id="Patient.LeadSource" name="Patient.LeadSource" value="Web Form: Sports Med App Appointment" /> 
     <input type="hidden" class="picklist" id="Patient.HC4__MostRecentLeadSource__c" name="Patient.HC4__MostRecentLeadSource__c" value="Web Form: Sports Med App Appointment" /> 
     <input type="hidden" class="string" id="DemandConnectForm" name="DemandConnect.Form" value="sportsAppRequest" /> 
     <label class="string" id="Patient.FirstName_label" for="Patient.FirstName">Patient First Name</label> 
     <input type="text" class="string required" id="Patient.FirstName" name="Patient.FirstName" value="" autocomplete="off" /><br/> 
     <label class="string" id="Patient.LastName_label" for="Patient.LastName">Patient Last Name</label> 
     <input type="text" class="string required" id="Patient.LastName" name="Patient.LastName" value="" autocomplete="off" /><br/> 
     <label class="date" id="Patient.HC4__Birthdate__c_label" for="Patient.HC4__Birthdate__c">Patient Birthdate</label> 
     <input type="text" class="date required" id="Patient.HC4__Birthdate__c" name="Patient.HC4__Birthdate__c" value="" /><br/> 
     <label class="email" id="Patient.Email_label" for="Patient.Email">Contact Email Address</label> 
     <input type="email" class="email required" id="Patient.Email" name="Patient.Email" value="" /><br/> 
     <label class="phone" id="Patient.Phone_label" for="Patient.Phone">Contact Phone</label> 
     <input type="tel" class="phone required" id="Patient.Phone" name="Patient.Phone" value="" /><br/> 
     <label class="picklist" id="HC4__Inquiry__c.HC4__SubmittedOnBehalfOf__c_label" for="HC4__Inquiry__c.HC4__SubmittedOnBehalfOf__c">Relation to Patient</label> 
     <input type="text" class="picklist required" id="HC4__Inquiry__c.HC4__SubmittedOnBehalfOf__c" name="HC4__Inquiry__c.HC4__SubmittedOnBehalfOf__c" value="" /><br/> 
     <label class="textarea" id="HC4__Inquiry__c.HC4__Comments__c_label" for="HC4__Inquiry__c.HC4__Comments__c">Reason for Appointment Request</label> 
     <textarea class="textarea required" id="HC4__Inquiry__c.HC4__Comments__c" name="HC4__Inquiry__c.HC4__Comments__c"></textarea><br/> 
     <input type="submit" id="sportsAppRequestSubmit" class="btn blue" value="Submit" class="disableOnClick" /> 
     <!-- <a href="/sportsmedapp/app/email/thanks" class="btn blue">Submit</a> --> 
    </form> 

我的驗證的jQuery看起來是這樣的：

$(document).ready(function() { 
    // just for the demos, avoids form submit 
    //jQuery.validator.setDefaults({ 
    // debug: false, 
    // success: "valid" 
    //}); 

    $('#sportsAppRequestSubmit').on('click', function(e) { // capture the <button> click 
    e.preventDefault();    // stop any default <button> action 
    $("#sportsAppRequest").submit(); // submit form (automatically validates) 
    }); 

    // Initialize form validation on the registration form. 
    // It has the name attribute "registration" 
    $("#sportsAppRequest").validate({ 
    onsubmit: false, 
    // Make sure the form is submitted to the destination defined 
    // in the "action" attribute of the form when valid 
    submitHandler: function(form) { 
     alert("SUBMIT"); 
     if ($(form).valid()) { 
     form.submit(); 
     } 
     return false; // prevent normal form posting 
    }, 
    // Specify validation rules 
    rules: { 
     // The key name on the left side is the name attribute 
     // of an input field. Validation rules are defined 
     // on the right side 
     "Patient.FirstName": "required", 
     "Patient.LastName": "required", 
     "HC4__Inquiry__c.HC4__SubmittedOnBehalfOf__c": "required", 
     "HC4__Inquiry__c.HC4__Comments__c": "required", 
     "Patient.HC4__Birthdate__c": { 
     required: true, 
     date: true 
     }, 
     "Patient.Email": { 
     required: true, 
     email: true 
     }, 
     "Patient.Phone": { 
     required: true, 
     phoneUS: true 
     } 
    }, 
    // Specify validation error messages 
    messages: { 
     "Patient.FirstName": "Please enter your firstname", 
     "Patient.LastName": "Please enter your lastname", 
     "Patient.Email": "Please enter a valid email address", 
     "Patient.HC4__Birthdate__c": "Please enter a valid date", 
     "Patient.Phone": "Please enter a valid phone number", 
     "HC4__Inquiry__c.HC4__SubmittedOnBehalfOf__c":"Please enter your relationship to the patient, or self", 
     "HC4__Inquiry__c.HC4__Comments__c": "Please enter the reason for your appointment" 
    }, 
    }); 
}); 

任何幫助將不勝appeciated！

Answer 1

1. 刪除您的整個click處理函數。在SO上顯示click處理程序的任何答案都可能與其實現錯誤，或者其表單提交「按鈕」不是type="submit"。

2. 刪除您的onsubmit: false選項，因爲這將禁用通過提交表單觸發的驗證。 As per the docs，您只能將此設置爲false至「使用其他事件進行驗證」。

3. 您不需要submitHandler內的if ($(form).valid())。 As per docs，表格在這一點上已經有效，所以在這裏檢查沒有意義。

4. 如果您submitHandler內唯一重要的部分是form.submit()，那麼你就可以完全去除submitHandler，因爲這是已經是這個插件的默認功能。

工作對我來說：jsfiddle.net/7cut3s4r/

注意：你不需要class="phone required"您input元素上，而你也.validate()方法中聲明這兩個相同的規則。這是多餘的和不必要的。