Make hidden div and inputs optional for valid form submit with jquery.validate

Question

I have a form that may only be one page or may be two pages depending on whether it is a single individual or two people applying. What I am doing right now is enabling a link that allows the user to get to the next group of form elements for their co-applicant via an onchange event that shows the link that will slideToggle the first users inputs and show the inputs for the additional users. It's a pretty lengthy form so I cut it down to a few elements so I could fiddle it out:

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");
    }
});

So in theory, the user can enter the fields and hit submit and the form is either valid or throws some errors. Or, the user can add a co-applicant, and validate the form on the link click before toggling to the next group of inputs.

Any ideas on how I would bind all of this to the one button and get it to play nice with jquery.validate?

Answer 1

You cannot dynamically "toggle" the rules of input fields.

However, you can use the .rules() method to dynamically add/change/remove rules, which essentially mimics the behavior of a toggle.

Also, since you're talking about fields that are hidden, you'll need to disable the option that makes validation ignore all hidden fields.

ignore: []