使隐藏的div和输入对于使用jquery.validate提交的有效表单是可选的

Question

我的表格可能只有一页或两页，具体取决于是一个人还是两个人一起申请。 我现在正在做的是启用一个链接，该链接允许用户通过onchange事件显示其共同申请人的下一组表单元素，该事件显示将滑动的链接切换第一个用户的输入并显示其他输入用户。 这是一个很长的表格，所以我将其缩减为几个元素，以便于进行摆弄：

Das Fiddle在这里

<form method="POST" id="refiLoanForm" action="mailto:i@i.com">
<!--START PRIMARY APPLICANT -->
<div id="primary-applicant">
   <label>
      Application Type
      <select name="applicationType" id="applicationType" class="wider" required>
         <option value="individual">Individual</option>
         <option value="joint">Joint</option>
      </select>
   </label>
   <br>
   <label for="loan-amount" id="loan-amount-label">Requested Finance Amount
   <input type="text" id="loan-amount" name="loanAmount"  required/></label>
   <br>
   <label for="remaining-term">Current Loan Remaining Term
   <input type="text" id="remaining-term" name="remainingTerm" max="3" size="3" required class="override"/>
   </label>
   <br>
   <a href="#" class="primaryApplicantSwitch" id="singleSubmitBtnLink2" style="display: none">CONTINUE TO CO-APPLICANT</a>
</div>
<!--END PRIMARY APPLICANT -->
<!--START CO_APPLICANT -->
<div id="co-applicant" style="display: none">
   <a href="#" id="backToPrimary">Back to Primary Applicant</a>
   <br>
   <label for="co-first-name">First Name
   <input type="text" id="co-first-name" name="coApplicantGivenName" maxlength="32" required/>
   </label>
   <br>
   <label for="co-last-name">Last Name
   <input type="text" id="co-last-name" name="coApplicantFamilyName" maxlength="32" required/>
   </label>
</div>

JS：

  $('#refiLoanForm').validate({
    onkeyup: false,
    ignore: ":disabled",
    submitHandler: function (form) { // for demo
        alert('valid form');
        return false;
    }
});
$("#singleSubmitBtnLoan").bind('click', function () {
    $('#refiLoanForm').valid();
});
//Handle the content being shown
$("#singleSubmitBtnLink2").on('click', function () {
    $("#primary-applicant").slideToggle("slow");
    $("#co-applicant").slideToggle("slow");
});
$("#backToPrimary").on('click', function () {
    $("#primary-applicant").slideToggle("slow");
    $("#co-applicant").slideToggle("slow");
});
$('#applicationType').on('change', function() {
    if ($(this).val() === 'joint') {
        $('.primaryApplicantSwitch').slideToggle("slow");
        $('.jointApplicantSwitch').slideToggle("slow");
    } else {
        $('.primaryApplicantSwitch').slideToggle("slow");
        $('.jointApplicantSwitch').slideToggle("slow");
    }
});

因此，从理论上讲，用户可以输入字段并单击“提交”，并且该表格有效或引发一些错误。 或者，用户可以添加共同申请人，并在切换到下一组输入之前，单击链接上的表单以对其进行验证。

关于如何将所有这些都绑定到一个按钮并使其与jquery.validate配合使用的任何想法？

Answer 1

您不能动态地“切换”输入字段的规则。

但是，您可以使用.rules()方法动态添加/更改/删除规则，该规则实质上模拟了切换的行为。

另外，由于您要谈论的是隐藏字段，因此您需要禁用使验证忽略所有隐藏字段的选项。

ignore: []