Question

我的表格可能只有一页或两页，具体取决于是单个人还是两个人申请。我现在正在做的是启用一个链接，允许用户通过onchange事件到达他们的共同申请者的下一组表单元素，该事件显示将滑动的链接切换第一个用户输入并显示附加的输入用户。这是一个非常冗长的形式，所以我把它切成几个元素，所以我可以把它弄清楚：

Das Fiddle is here

<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

您无法动态“切换”输入字段的规则。

但是，您可以使用the .rules() method动态添加/更改/删除规则，这基本上模仿了切换的行为。

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

ignore: []

使用jquery.validate为隐藏的div和输入提供可选的有效表单

1 个答案: