Validating slide before transition

Question

I am using Cycle2 (http://jquery.malsup.com/cycle2/) to create a wizard-like navigation on a website. I wish to validate the current slide, when I am clicking the next button, before transition to the next slide.

I have tried firing the cycle-before event and doing my conditions, but I have no clue on how to actually stop the transition. The commands like .cycle('stop') does not seem to work when firing in cycle-before - it continues to the next slide.

I need to validate some input fields in the slide before allowing to use the next button.

The current setup is:

<div id="questions" class="cycle-slideshow"
         data-allow-wrap="false"
         data-cycle-caption="#question-progress"
         data-cycle-caption-template="Question {{slideNum}} of {{slideCount}}"
         data-cycle-slides="div.question"
         data-cycle-fx="scrollHorz"
         data-cycle-timeout="0"
         data-cycle-next="#next-question">

         <div class="question"> ... </div>
         <div class="question"> ... </div>
         <div class="question"> ... </div>

</div>

<a id="next-question" href="#">Next question</a>

Any ideas?

Answer 1

The way I would do this is to remove the data-cycle-next="#next-question" from your slideshow definition, and instead write your own click handler on the Next Question button. That way you will not start the transition until you know that the data is valid.

$('#next-question').click(function(){
  //Do validation

  //If valid, go to next slide
      $('.cycle-slideshow').cycle('next');
});