Validating a multi-page form with parsley.js

Question

I am working with the multi-page form found here and trying to validate the fieldsets using parsley.js. I have followed their steps on their examples page for a multi-page form but I run into one of two problems:

1) It won't prompt for non-filled in fields until I hit submit and then will show the errors when I hit previous or 2) When I click on Next I get an error in the console that says it's an undefined function on "next_fs.show();"

Here is the form code followed below by a link to all my current code in a fiddle.

    <!-- multistep form -->
<form id="msform" data-parsley-validate>
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Account Setup</li>
        <li>Social Profiles</li>
        <li>Personal Details</li>
    </ul>
    <!-- fieldsets -->
    <fieldset class="first block1">
        <h2 class="fs-title">Create your account</h2>
        <h3 class="fs-subtitle">This is step 1</h3>
        <input type="text" name="email" placeholder="Email" required data-parsley-group="block1" />
        <input type="password" name="pass" placeholder="Password" required data-parsley-group="block1" />
        <input type="password" name="cpass" placeholder="Confirm Password" required data-parsley-group="block1" />
        <input type="button" name="next" class="next action-button" value="Next" data-current-block="1" data-next-block="2"  />
    </fieldset>
    <fieldset class="second block2">
        <h2 class="fs-title">Social Profiles</h2>
        <h3 class="fs-subtitle">Your presence on the social network</h3>
        ...
<input type="button" name="previous" class="previous action-button" value="Previous" data-current-block="2" data-next-block="1" />
        <input type="button" name="next" class="next action-button" value="Next" data-current-block="2" data-next-block="3" />
    </fieldset>
    <fieldset class="third block3">
        <h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle">We will never sell it</h3>
        ...
<input type="button" name="previous" class="previous action-button" value="Previous" data-current-block="3" data-next-block="2" />
        <button type="submit" name="donateNow" id="donateNow" class="submit action-button" value="Submit" >Submit</button>
    </fieldset>
</form>

Here is a fiddle with my current code with the tweaks to work with parsley.js. (I'm currently running into problem #2)

I cannot for the life of me figure out how to get the validation to work on the page change. Thanks for any help that can be provided!

Answer 1

You have a couple of issues with your code. Regarding your #2 issue, it's happening due to this:

//this comes from the custom easing plugin
easing: 'easeInOutBack'

You have this as part of the options object of animate . As per your comment, this comes from a custom plugin, which you're not including in your jsfiddle.

If you comment that line, it will animate as expected ( see updated jsfiddle );

As to your #1 issue:

1. You are not including parsley.js in your code
2. You aren't binding parsley to your form (which you should do with $("#msform").parsley() or with the attribute data-parsley-validate )
3. When you click on .next or .prev you always show the next or previous fieldset without validating that fieldset / block.
4. Your jsfiddle doesn't match the code you posted. In the fiddle you don't have the required attribute.

You should take a look at the multisteps example , especially to the javascript portion, which I include here with aditional comments:

// The form tag is <form id="demo-form" data-parsley-validate>, so 
// parsley will automatically be bound to that form.
// see the docs http://parsleyjs.org/doc/index.html#psly-usage-form
<script type="text/javascript">
$(document).ready(function () {
  // when you click on next
  $('.next').on('click', function () {
    // save current and previous blocks (these are your fieldsets)
    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)
      // THIS IS THE IMPORTANT STEP. Validate the current block,
      // If the current block is not validated, the next block
      // won't be shown (note the return).
      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>