title: Bootstrap Carousel and JQuery "Uncaught RangeError: Maximum call stack size exceeded"
body: <p>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 </p>
  
  <pre><code>Uncaught RangeError: Maximum call stack size exceeded 
  </code></pre>
  
  <p>The error does not seem to affect anything right now but I'm sure it will in production or somewhere down the line.</p>
  
  <p>JS</p>
  
  <pre><code>// 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');
          };      
        };
     });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="carousel-example-generic" class="carousel slide carousel-off-screen form-group" data-ride="carousel" data-interval="false"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="http://jsfiddle.net/v87cL/3/" rel="nofollow">http://jsfiddle.net/v87cL/3/</a></p>