Parsley.js - one multi steps function for all forms

Question

I am trying to set-up the multi steps form validation using the Parsely.js validation plugin.

I followed the documentation here: "http://parsleyjs.org/doc/examples/multisteps.html" - but the only problem is I am going to have few forms that will have multi steps across the site and on some pages there will be more than one.

The snippet provided only support one form at a time, I need to specify an ID for each form as showed below:

<script type="text/javascript">
$(document).ready(function () {
  $('.next').on('click', function () {
    var current = $(this).data('currentBlock'),
      next = $(this).data('nextBlock');

    // only validate going forward. If current group is invalid, do not go further
    // .parsley().validate() returns validation result AND show errors
    if (next > current)
      if (false === $('#demo-form').parsley().validate('block' + current))
        return;

    // validation was ok. We can go on next step.
    $('.block' + current)
      .removeClass('show')
      .addClass('hidden');

    $('.block' + next)
      .removeClass('hidden')
      .addClass('show');

  });
});
</script>

Is there a way to tweak the snippet so it automatically detect if the form has more than one step and apply the appropriate behavior/settings accordingly? Rather than having to duplicate that snippet over and over for each form.

Here is how the HTML would look like:

<form id="demo-form" data-parsley-validate>
  <div class="first block1 show">
    <label for="firstname">Firstname:</label>
    <input type="text" name="firstname" data-parsley-group="block1" required/>

    <label for="lastname">Lastname:</label>
    <input type="text" name="lastname" data-parsley-group="block1" required />
    <span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span>
  </div>

  <div class="second block2 hidden">
    <label for="fullname">Email:</label>
    <input type="text" name="fullname" required  data-parsley-type="email" data-parsley-group="block2" />
    <span class="next btn btn-info pull-left" data-current-block="2" data-next-block="1">< Previous</span>
    <input type="submit" class="btn btn-default pull-right" />
  </div>
</form>

Answer 1

You need to change the code to specify the form the user is currently working with. I've altered the code block you're using to do that, comments included:

$(document).ready(function () {
  $('.next').on('click', function () {
    // Find the form whose button was just clicked
    var currentForm = $(this).parents('form').first();

    var current = $(this).data('currentBlock'),
    next = $(this).data('nextBlock');

    // only validate going forward. If current group is invalid, do not go further
    // .parsley().validate() returns validation result AND show errors
    if (next > current)
      // Use currentForm found above here, rather than hard coded form id
      if (false === currentForm.parsley().validate('block' + current))
        return;

    // validation was ok. We can go on next step.
    // Hide current block on current form
    currentForm.find('.block' + current)
      .removeClass('show')
      .addClass('hidden');

    // Show next block on current form
    currentForm.find('.block' + next)
      .removeClass('hidden')
      .addClass('show');
  });
});