Why is Parsley validating fields with display: none?

Question

I am using parsley for validation of a form, and I am trying to set it up so when you click the next button you can't change pages unless the current one is filled out correctly. However it is validating fields that are included in a div with style="display: none;"

Here is an example of a field

<div class="hidden tab" id="notAlwaysManitoban">
  <div class="field">
    <label for="residencybeforecanada">Where was your residency before your arrival in Manitoba? </label>
    <input type="text" name="residencybeforecanada" id="residencybeforecanada" data-parsley-required="true" data-parsley-required-message="Please enter where you lived before arriving in Manitoba">
  </div>
  <div class="field">
    <label for="arrivalInManitobaDate">Date of arrival in Manitoba (MM-YYYY)</label>
    <input type="text" name="arrivalInManitobaDate" id="arrivalInManitobaDate" class="dateChooserMY" placeholder="MM-YYYY" maxlength="7" data-parsley-required="true" data-parsley-validyear data-parsley-required-message="Enter date with the format MM-YYYY.">
  </div>

Is there anyway to make parsley ignore divs that have style="display:none;" all together?

Answer 1

You just need to add data-parsley-excluded="true" on the input.

data-parsley-excluded #2.1 | If set to true, Parsley will ignore this field when binding a form.

https://parsleyjs.org/doc/index.html#usage-field