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处理程序以及此插件的任何答案都可能在其实现中出错，或者其表单提交“按钮”不是type="submit"。
删除onsubmit: false选项，因为这会因提交表单而触发验证。 As per the docs，您只需将此设置为false至“使用其他事件进行验证”。
if ($(form).valid())内您不需要submitHandler。 As per docs，表格此时已经有效，所以在这里查看是没有意义的。
如果submitHandler中唯一重要的部分是form.submit()，那么您可以完全删除submitHandler，因为这已经是此插件的默认功能。

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

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

jQuery Validate验证但不提交

1 个答案: