jQuery Validate 验证但不提交

Question

我一直在查看这个问题的几十个不同版本，并尝试了几十个不同的建议，但我无法让它发挥作用。

我正在使用 jQuery validate 来验证我的表单。如果我在未填写表单的情况下点击提交按钮，则会标记所有必填字段并显示正确的消息。所以，我知道验证是否有效。

但是，如果我填写所有字段并点击提交，似乎什么都没有发生。我没有收到控制台消息或错误。我添加了一个警报，但它也没有被触发。

我的表单如下所示：

    <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

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/

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