jQuery Validate 验证但不提交

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"
    },
  });
});

如有任何帮助，我们将不胜感激！

Answer 1

删除整个 click 处理函数。 SO 上显示 click 处理程序以及此插件的任何答案在其实现中都可能是错误的，或者其表单提交 "button" 不是 type="submit".
删除您的 onsubmit: false 选项，因为这会禁用由提交表单触发的验证。 As per the docs，你只需要将它设置为 false 到 "use other events for validation"。
你不需要if ($(form).valid())内的submitHandler。 As per docs，表格此时已经有效，所以没有必要在这里检查。
如果 submitHandler 中唯一重要的部分是 form.submit()，那么您可以完全删除 submitHandler，因为这已经是该插件的默认功能.

为我工作：jsfiddle.net/7cut3s4r/

注意：您不需要在 input 元素上使用 class="phone required"，同时您还在 [=22= 中声明了这两个相同的规则] 方法。这是多余的和不必要的。

jQuery Validate 验证但不提交

jQuery Validate validates but doesn't submit

forms

jquery

jquery-validate