Bootstrap Carousel and JQuery "Uncaught RangeError: Maximum call stack size exceeded"

Question

I could like my carousel to only move forward IF a form is filled out entirely. I've tried using the slid and slide methods as well as previus, next and pause. With the following code, I achieve the functionality and user experience I want but there is a console error that I am concerned with

Uncaught RangeError: Maximum call stack size exceeded 

The error does not seem to affect anything right now but I'm sure it will in production or somewhere down the line.

JS

// when my carousel is clicked to slide forward
$('#carousel-example-generic').on('slide.bs.carousel', function () {
  // find the active carousel item
$(".item").each(function(i11,e12){
  if ($(e12).hasClass("active")){
        // if the first input is blank 
        if ($(e12).find("input:first").val() === ""){
           // then pause the carousel and go back
       $('.carousel').carousel('pause');
       $('.carousel').carousel('prev');
        };      
      };
   });
});

HTML

<div id="carousel-example-generic" class="carousel slide carousel-off-screen form-group" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="item active">

This has the correct effect of the carousel moving to the next slide then pausing and returning so then I can tell the user to correctly enter the fields. But, I am curious as to how to fix the error.

http://jsfiddle.net/v87cL/3/

Answer 1

You're triggering the slide event again when you call prev, and again and again ad infinitum.

Instead of pausing and going back, cancel the event with return false; or use e.preventDefault();

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
    console.log(e); 
    $('.item.active',this).each(function(i,el) {
        if ($(el).find('input:first').val()==='') {
             e.preventDefault();   
        }
    });
});

http://jsfiddle.net/mblase75/v87cL/

Answer 2

Another solution was to use the slid method and not the slide method. That way it executes after the slide completes, checks the input of the slide, and moves it back if not complete.

$('#carousel-example-generic').on('slid.bs.carousel', function (e) {
    $(".item").each(function(i11,e12){
        if ($(e12).hasClass("active")){
            if ($(e12).prev().find("input:first").val() === ""){
              $('.carousel').carousel('prev');
            };
        };
    });
});