Parsley - Examples | Multi steps form

### Parsley

Tweet

## Multi steps form demo

<< Back to examples

Firstname: Lastname: Next >
Email: < Previous

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

        <label for="email">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="website">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>

    <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>