jquery too much recursion error on form.each function with bootstrap validation

Question

There was no console error for my form that uses Bootstrap Validator (http://formvalidation.io/) until I needed to put multiple forms on the page. Now, when I run $(form).each(), I'm getting a too much recursion error.

    $('form').each(function(){
        var form_id = $(this).attr("id");
        $(this).bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email is required and cannot be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                }                   
            }
        }).on('success.form.bv', app.form_handler);
    });

Here's the javascript app.form_handler:

app.form_handler = function( evt ){
    evt.preventDefault();
    app.$ajax_form = $(evt.target);
    var serialized_data = app.$ajax_form.serialize();
    app.post_ajax( serialized_data );
};

Then the post_ajax function...

 app.post_ajax = function( serial_data ){
    var post_data = { 
        action     : 'cm_ajax',
        nonce      : cm_ajax.nonce,
        serialized : serial_data,
    };

    $.post( cm_ajax.ajax_url, post_data, app.ajax_response, 'json' )
};

Not sure what app.form_handler does (is that PHP?). But the code you've provided handles the same event success.form.bv each time any form is validated - so form1 raises succes.form.bv which app.form_handler then initiates validation on form2 which raises the same event which validates form1, which raises the event and validates form2 etc... In your app.form_handler code, try checking $(e.target) which should give you the specific form which has just been validated and limit the code (more info: formvalidation.io/settings/#event-form) — fdomn-m
– fdomn-m, Commented Sep 9, 2015 at 22:52
That makes sense, but I'm not sure how to fix it. The app.form_handler is javascript -- I'll update above. — JDawg
– JDawg, Commented Sep 10, 2015 at 0:14

Phuoc Nguyen · Accepted Answer · 2015-09-11 05:28:47Z

1

The Too Much Recursion Error issue might happen if there is a form that doesn't follow Bootstrap form structure. See the Writing form section.

Meanwhile, $(form) actually will choose ALL forms in the page. So, either checking ALL forms on page to ensure that ALL of them use a standard Bootstrap form markup, or uses more strict selector such as $('#form1, #form2')

answered Sep 11, 2015 at 5:28

Phuoc Nguyen

5414 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JDawg · Accepted Answer · 2015-09-11 14:57:39Z

0

This was triggering an error because I was logged in to WordPress as an admin (meaning lots of hidden forms were on the page). Thus, the $(form).each function was running on every form, which didn't use standard Bootstrap markup, triggering the error.

I fixed this by adding a custom class to the forms I wanted the validator to run on, then added an IF clause to only run the validator if($(this).hasClass('bootstrapFormClass')){ ... }

This worked fine and now the validator, and all my forms work fine.

answered Sep 11, 2015 at 14:57

JDawg

234 bronze badges

Collectives™ on Stack Overflow

jquery too much recursion error on form.each function with bootstrap validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related