Parsley-js multistep

<!DOCTYPE html>
<html>

<head>
  <title>Parsley js remote validator issue</title>
  <meta charset="utf-8">

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/2.7.0/parsley.js"></script>

  <style type="text/css">
    .form-section {
      display: none
    }

    .form-section.current {
      display: block !important;
    }

    .parsley-errors-list {
      color: red
    }

    .parsley-success {
      color: green;
    }
  </style>
</head>

<body>

<h1>Parsley JS Issue</h1>
<h3>See your dev tools console</h3>
<hr/>
<br>

<form class="demo-form">
  <section class="form-section">
    <label>First Name:</label>
    <input type="text" class="form-control" name="firstname" required="">
  </section>

  <!-- Just adding a remote validator to this field -->
  <section class="form-section">
    <label>Email: <b>(remote validator)</b></label>
    <input type="text" class="form-control" name="email" placeholder="Type anything"
           required=""
           minlength="3"
           data-parsley-trigger="input"
           data-parsley-remote="server.json"
    >
    <p style="color: blue">You can not proceed next even if this field is valid.</p>
  </section>

  <section class="form-section">
    <label>Favorite color:</label>
    <input type="text" class="form-control" name="color" required="">
  </section>

  <div class="form-navigation">
    <button type="button" class="previous btn btn-info pull-left">&lt; Previous</button>
    <button type="button" class="next btn btn-info pull-right">Next &gt;</button>
    <button type="submit" class="btn btn-default pull-right">Submit</button>
    <span class="clearfix"></span>
  </div>

</form>


<script type="text/javascript">
  // Code taken from
  // http://parsleyjs.org/doc/examples/multisteps.html
  var $sections = $('.form-section');

  function navigateTo(index) {
    // Mark the current section with the class 'current'
    $sections
        .removeClass('current')
        .eq(index)
        .addClass('current');
    // Show only the navigation buttons that make sense for the current section:
    $('.form-navigation .previous').toggle(index > 0);
    var atTheEnd = index >= $sections.length - 1;
    $('.form-navigation .next').toggle(!atTheEnd);
    $('.form-navigation [type=submit]').toggle(atTheEnd);
  }

  function curIndex() {
    // Return the current index by looking at which section has the class 'current'
    return $sections.index($sections.filter('.current'));
  }

  // Previous button is easy, just go back
  $('.form-navigation .previous').click(function () {
    console.log('click previous');
    navigateTo(curIndex() - 1);
  });

  // Next button goes forward iff current block validates
  $('.form-navigation .next').click(function () {
    console.log('click next');
    if ($('.demo-form').parsley().validate({group: 'block-' + curIndex()})) {
      console.log('section is valid moved to next');
      navigateTo(curIndex() + 1);
    } else {
      console.log('section is not valid')
    }

  });

  // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
  $sections.each(function (index, section) {
    $(section).find(':input').attr('data-parsley-group', 'block-' + index);
  });
  navigateTo(0); // Start at the beginning


  // hook form submit event
  $(".demo-form").on('submit', function (e) {
    e.preventDefault();
    console.log('form submit');

    var instance = $(this).parsley();

    alert('form status = ', instance.isValid());

    return false;
  });

</script>


</body>

</html>

# Parsley JS remote validator and MultiStep forms

http://parsleyjs.org/doc/examples/multisteps.html

["status":"true"]