jQuery Validate 验证但不提交

Posted

技术标签:

【中文标题】jQuery Validate 验证但不提交【英文标题】:jQuery Validate validates but doesn't submit 【发布时间】:2017-01-31 12:07:55 【问题描述】:

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

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

任何帮助将不胜感激!

【问题讨论】:

取出你的click处理程序。该插件会自动为您执行此操作。 感谢您的建议。有没有都试过了。我在 *** 上看到的一些答案明确使用了它,所以我留下它以防万一。我已经把它拿出来了,但它似乎没有效果。 你有onsubmit: false。这会在提交期间禁用自动验证。 【参考方案1】:

    删除整个 click 处理函数。任何在 SO 上显示click 处理程序以及此插件的答案都可能在其实现中出现错误,或者其表单提交“按钮”不是type="submit"

    删除您的onsubmit: false 选项,因为这将禁用由提交表单触发的验证。 As per the docs,您只需将其设置为 false“使用其他事件进行验证”

    submitHandler 中不需要 if ($(form).valid())。 As per docs,此时表格已经有效,所以这里检查没有意义。

    如果您的submitHandler 中唯一重要的部分是form.submit(),那么您可以完全删除submitHandler,因为这已经是此插件的默认功能。

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

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

【讨论】:

谢谢你,@sparky!

以上是关于jQuery Validate 验证但不提交的主要内容,如果未能解决你的问题,请参考以下文章

Jquery validate自定义验证

当 jquery.validate 验证表单时启用提交按钮

jQuery插件Validate验证提交表单submitHandler更改错误信息显示的位置requiredValidator内置验证方式表validate ()的可选项汇总

jQuery Validate 提交表单验证失败扩展方法

用jquery.validate() 如何控制提交?

jquery.validate不用submit提交,用js提交的怎么触发验证