Uncaught RangeError: Maximum call stack size exceeded - Bootstrap Validate

Question

I am getting the above error with my form: I don't have any issue with the following HTML and JavaScript to use Bootstrap Validator.

HTML:

<div class="form-group">
    <label class="col-lg-3 control-label">Delivery Agent</label>
    <div class="col-lg-5">
    <select name="delivered_by" class="form-control">
            <option value="">-- Select --</option>
            <option value="8">Captain America</option>
            <option value="12">Iron Man</option>
        </select>
    </div>
</div>
<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>

JavaScript:

$('#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'
                }
            }
        },
        bottles_returned: {
            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'
                }
            }
        },
        delivered_by: {
            validators: {
                notEmpty: {
                    message: 'Please choose a delivery agent'
                }
            }
        }
    }
});

But when I add the following HTML code to that form, it shows that error.

<input type="text" maxlength="3" value="0" class="form-control" name="bottles_delivered[]">
<input type="text" maxlength="3" value="0" class="form-control" name="empty_bottles_collected[]">

Answer 1

I had a similar problem. This solution works for me: Maximum call stack size exceeded when changing a class - Bootstrap, jQuery

You have to validate the structure of your form: http://formvalidation.io/getting-started/#writing-form