Parsley-js form submit issue

<!DOCTYPE html>
<html>

<head>
  <title>Parsley js form submit issue</title>
  <meta charset="utf-8">

   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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 form submit 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>
  
   <!-- try removing this section, and see difference -->
  <section class="form-section">
    <label>Question: <b>(remote validator)</b></label>
    <input type="text" class="form-control" name="email" placeholder="Type anything"
           required=""
           data-parsley-trigger="input"
           data-parsley-remote="server.json"
    >
  </section>

  <section class="form-section">
    <label>Favorite color:</label>
    <input type="text" class="form-control" name="color" required="">
    <p style="color:blue">Get ready for double form submit</p>
  </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>
  </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 getCurrentIndex() {
    // 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(getCurrentIndex() - 1);
  });
  
    //  Check current form section
    function isCurrentIndexValid() {
      return $('.demo-form').parsley().whenValidate({group: 'block-' + getCurrentIndex()});
    }

  // Next button goes forward iff current block validates
  $('.form-navigation .next').click(function () {
    console.log('click next');
    
    isCurrentIndexValid().then(function () {
        navigateTo(getCurrentIndex() + 1);
        console.log('step is valid, move next');
      },function () {
        console.log('step 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();
    e.stopPropagation();
    // ugly hack
    // $(this).off('submit.Parsley');
    // console.log('default prevented- '+e.isDefaultPrevented())
    console.log('form submit event',e);

       isCurrentIndexValid().then(function (e) {
         console.log('form is valid, submit via ajax');
         //do ajax here
         alert('form submit event');
        },function () {
          console.log('form not valid');
          return false;
        });

    return false;
  });

</script>


</body>

</html>

# Parsley JS double form submit event

http://parsleyjs.org/

{
	"status": true
}