Превышен максимальный размер стека вызовов при изменении класса - Bootstrap, jQuery

Question

Я использую jQuery 2.1.1, jQuery UI 1.11, Bootstrap 3.2, Fuel UX 2.3 (только для мастера форм) и BootstrapValidator v0.5.1-dev.

У меня есть огромная загруженная форма в мастере Fuel UX, с проверкой BootstrapValidator, а также тонна jQuery для событий и прочего (общая страница - 1900 строк, поэтому я не предоставил никакого кода).

У меня был div с классом col-xs-8 по всей моей форме, все работало нормально. Затем я изменил его на class="container" (только изменил код, проиграл пару раз назад), и теперь консоль Chrome говорит:

Uncaught RangeError: Maximum call stack size exceeded 

Зачем?

Я проверил стек вызовов, там нет ничего, кроме функций jQuery (так что это не должно быть то, что я или BootstrapValidator запустил, не так ли?).

У меня есть другая страница, с тем же окружением, схожим размером и похожим кодом - там переход с.col-xs-8 на.container прошел без проблем.

Обновление: я обнаружил, что если я оставлю основной div без класса, я также получу RangeError. Ооо вот мой JS https://gist.github.com/sofixa/be2e575cf8a198c1cf89

Answer 1

Если ваша форма НЕ структурирована по классам Bootstrap (элемент, содержащий поле и связанную метку, НЕ имеет класса группы форм), вы увидите ошибку:

Uncaught RangeError: Maximum call stack size exceeded

Ссылка: Максимальный размер стека вызовов превысил предупреждение об ошибке в официальных документах.

Answer 2

Все поля, упомянутые в разделе bootstrapValidatorфункция должна иметь родителя с form-groupучебный класс.

Так и должно быть.

      <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'
                }
            }
        }
    }
});