javascript - Maximum call stack size exceeded when changing a class - Bootstrap, jQuery - Stack Overflow

I'm using jQuery 2.1.1, jQuery UI 1.11, Bootstrap 3.2, Fuel UX 2.3 (for the form wizard only) and BootstrapValidator v0.5.1-dev.

I have a huge bootstrapped form in a Fuel UX Wizard, with BootstrapValidator validation, along with a ton of jQuery for events and stuff(the total page is 1900 lines, that's why i haven't provided any code).

I had a div with class col-xs-8 around all of my form, everything was working fine. Then i changed it to class="container" (only change in the code, played it a couple of times back and forth), and now Chrome's console says :

Uncaught RangeError: Maximum call stack size exceeded 

Why?

I have checked the call stack, there's nothing but jQuery functions there(so it shouldn't be something i or the BootstrapValidator has launched, should it?).

I have another page, with the same enviorenement, similar size and similar code - there the change from .col-xs-8 to .container went without issues.

Update: I discovered that if i leave the main div without a class, i also get the RangeError. Sooo here's my JS

I'm using jQuery 2.1.1, jQuery UI 1.11, Bootstrap 3.2, Fuel UX 2.3 (for the form wizard only) and BootstrapValidator v0.5.1-dev.

I have a huge bootstrapped form in a Fuel UX Wizard, with BootstrapValidator validation, along with a ton of jQuery for events and stuff(the total page is 1900 lines, that's why i haven't provided any code).

I had a div with class col-xs-8 around all of my form, everything was working fine. Then i changed it to class="container" (only change in the code, played it a couple of times back and forth), and now Chrome's console says :

Uncaught RangeError: Maximum call stack size exceeded 

Why?

I have checked the call stack, there's nothing but jQuery functions there(so it shouldn't be something i or the BootstrapValidator has launched, should it?).

I have another page, with the same enviorenement, similar size and similar code - there the change from .col-xs-8 to .container went without issues.

Update: I discovered that if i leave the main div without a class, i also get the RangeError. Sooo here's my JS https://gist.github.com/sofixa/be2e575cf8a198c1cf89

• javascript
• jquery
• html
• twitter-bootstrap-3
• jqbootstrapvalidation

Share Improve this question Follow edited Aug 12, 2014 at 13:54 Adrian Todorov asked Aug 12, 2014 at 13:33 Adrian TodorovAdrian Todorov 28911 gold badge22 silver badges1111 bronze badges 7

• " there's nothing but jQuery functions there", that is what gives the error. – Jordan.J.D Commented Aug 12, 2014 at 13:37
• What i meant was functions called by jQuery itself, nothing written by me. – Adrian Todorov Commented Aug 12, 2014 at 13:40
• Post any code you have written yourself; did you write any javascript? – Jordan.J.D Commented Aug 12, 2014 at 13:41
• There's plenty of JS(jQuery to be precise), a few hundred lines, but the problem isn't in any of that i didn't have any problems until i changed the main div's class to container. Even now, if i change it back to col-xs-8, it works just fine. – Adrian Todorov Commented Aug 12, 2014 at 13:44
• 1 I've edited the post with a link towards all of my JS code – Adrian Todorov Commented Aug 12, 2014 at 13:54

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 15

If your form is NOT structured by Bootstrap classes (the element containing field and associated label does NOT have form-group class), you will see the error :

Uncaught RangeError: Maximum call stack size exceeded

Reference : Maximum call stack size exceeded error warning in the official docs.

All fields mentioned under the bootstrapValidator function should have a parent with form-group class.

So it should be like this.

<div class="form-group">
    <label class="col-lg-3 control-label">No of bottles out for delivery</label>
    <div class="col-lg-5">
        <input type="text" value="" class="form-control" maxlength="3" name="bottles_out_for_delivery">
    </div>
</div>
<div class="form-group">
    <label class="col-lg-3 control-label">No of bottles returned</label>
    <div class="col-lg-5">
        <input type="text" value="" class="form-control" maxlength="3" name="bottles_returned">
    </div>
</div>

$('#add_bulk_delivery_form').bootstrapValidator({
    fields: {
        bottles_out_for_delivery: {
            validators: {
                notEmpty: {
                    message: 'Bottles out for delivery field can\'t be empty'
                },
                regexp: {
                    regexp: /^[0-9]+$/,
                    message: 'Bottles out for delivery can only contan numbers'
                }
            }
        }
    }
});