title: Dynamically add and remove form fields to be validated by Parsley.js
body: <p>Here is my fiddle: <a href="https://jsfiddle.net/Phantomias/swLgns4g/" rel="nofollow noreferrer">My Fiddle (updated)</a></p>
  
  <p>In my form (ID: #form), inputs fields are shown or hidden based on the selected option of a select input.</p>
  
  <p>Each Input and its labels a wrapped in a div, which is hidden or shown based on the selected option. The attribute data-children of the select contains the information (in JSON Format) which inputs are to be shown when a certain option is selected.</p>
  
  <p>I use the data-parsley-excluded attribute to remove the fields not visible from the parsley validation (<a href="http://parsleyjs.org/doc/index.html#usage-field" rel="nofollow noreferrer">Parsley Documentation)</a>.
  Before I execute the parsley method <code>$('#form').destroy();</code>, at the end <code>$('#form').parsley();</code></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-offset-2 col-sm-8"&gt;
           &lt;form id="form" method="post" accept-charset="UTF-8" class="form-horizontal" data-parsley-validate=""&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label" for="question_01" style=""&gt;Question 1&lt;/label&gt;
                  &lt;select class="form-control" name="question_01" id="question_01" required data-children="{&amp;quot;option_01&amp;quot;:[&amp;quot;input_01&amp;quot;,&amp;quot;input_02&amp;quot;,&amp;quot;input_03&amp;quot;,&amp;quot;input_04&amp;quot;,&amp;quot;input_05&amp;quot;,&amp;quot;input_06&amp;quot;],&amp;quot;option_02&amp;quot;:[&amp;quot;input_01&amp;quot;,&amp;quot;input_06&amp;quot;,&amp;quot;input_07&amp;quot;,&amp;quot;input_08&amp;quot;,&amp;quot;input_09&amp;quot;,&amp;quot;input_10&amp;quot;],&amp;quot;option_03&amp;quot;:[&amp;quot;input_02&amp;quot;,&amp;quot;input_04&amp;quot;,&amp;quot;input_05&amp;quot;,&amp;quot;input_07&amp;quot;,&amp;quot;input_09&amp;quot;,&amp;quot;input_10&amp;quot;,&amp;quot;input_11&amp;quot;]}"&gt;
                      &lt;option value="" selected&gt;Bitte auswählen&lt;/option&gt;
                      &lt;option value="option_01"&gt;Option 01&lt;/option&gt;
                      &lt;option value="option_02"&gt;Option 02&lt;/option&gt;
                      &lt;option value="option_03"&gt;Option 03&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div id="div_input_01" class="form-group input-div hidden"&gt;
                  &lt;label for="input_01" style=""&gt;Input 01&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_01" id="input_01" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_02" class="form-group input-div hidden"&gt;
                  &lt;label for="input_02" style=""&gt;Input 02&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_02" id="input_02" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_03" class="form-group input-div hidden"&gt;
                  &lt;label for="input_03" style=""&gt;Input 03&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_03" id="input_03" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_04" class="form-group input-div hidden"&gt;
                  &lt;label for="input_04" style=""&gt;Input 04&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_04" id="input_04" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_05" class="form-group input-div hidden"&gt;
                  &lt;label for="input_05" style=""&gt;Input 05&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_05" id="input_05" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_06" class="form-group input-div hidden"&gt;
                  &lt;label for="input_06" style=""&gt;Input 06&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_06" id="input_06" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_07" class="form-group input-div hidden"&gt;
                  &lt;label for="input_07" style=""&gt;Input 07&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_07" id="input_07" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_08" class="form-group input-div hidden"&gt;
                  &lt;label for="input_08" style=""&gt;Input 08&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_08" id="input_08" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_09" class="form-group input-div hidden"&gt;
                  &lt;label for="input_09" style=""&gt;Input 09&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_09" id="input_09" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_10" class="form-group input-div hidden"&gt;
                  &lt;label for="input_10" style=""&gt;Input 10&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_10" id="input_10" required&gt;
              &lt;/div&gt;
              &lt;div id="div_input_11" class="form-group input-div hidden"&gt;
                  &lt;label for="input_11" style=""&gt;Input 11&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="input_11" id="input_11" required&gt;
              &lt;/div&gt;
              &lt;button type="button" class="btn btn-info btn-block btn-submit-settings"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>$(document).ready(function() {
      $('.btn-submit-settings').on('click', function(e) {
          window.Parsley.on('field:error', function()
          {
              console.log('Validation failed for: ', this.$element);
          });
          $('#form').submit();
      });
  
      $('#form select').change(function() {
          var $this = $(this);
          if ($this.data('children')) {
              $('#form').parsley().destroy();
              // Hide all child elements
              $.each($this.data('children'), function(value_id, input_id_array) {
                  $.each(input_id_array, function(key, input_id) {
                      if ($('#div_' + input_id).length ) {
                          $('#' + input_id).val(null);
                          if (!$('#div_' + input_id).hasClass('hidden')) {
                              $('#div_' + input_id).addClass('hidden');
                          }
                      }
                  });
              });
              // show the child elements of the selected option
              if ($this.data('children')[$this.val()]) {
                  $.each($this.data('children')[$this.val()], function(key, input_id) {
                      if ($('#div_' + input_id).length )
                      {
                          if ($('#div_' + input_id).hasClass('hidden'))
                          {
                              $('#div_' + input_id).removeClass('hidden');
                          }
                      }
                  });
              }
              // For all inputs inside hidden div set attribute "data-parsley-excluded" = true 
              $('#form div.input-div.hidden').find(':input').each(function() {
                  var attr_data_parsley_excluded = $(this).attr('data-parsley-excluded');
                  if (typeof attr_data_parsley_excluded === typeof undefined || attr_data_parsley_excluded === false) {
                      $(this).attr('data-parsley-excluded', 'true');
                  }
              });
              // For all inputs inside not hidden div remove attribute "data-parsley-excluded"
              $('#form div.input-div:not(.hidden)').find(':input').each(function() {
                  console.log(this.id);
                  $(this).removeAttr('data-parsley-excluded');
              });
  
              $('#form').find(':input').each(function() {
                  // Log shows that attribute is set right, seems to be ignored by parsley
                  console.log('ID: ' + this.id + ' TYPE: ' + $(this).prop('nodeName') + ': excluded=' + $(this).attr('data-parsley-excluded'));
              });
              $('#form').parsley();
              $('#form').parsley().refresh();
          }
      });
  });
  </code></pre>
  
  <p>I can't get it to work, even though the attributes seem to be set the right way.</p>
  
  <p>The fields once hidden, stay out of the validation.</p>