The form message, resulting in a maximum call stack size

Question

I created a form that is used to validate a person on a website, however, when the form is submitted, nothing happens and the console displays "Maximum call stack exceeded." Hope someone can point out an error in my code so that this does not work. Here is the form code:

<form id="fReviewMe" method="post" action="/process/review-p.cfm" enctype="multipart/form-data" style="display:none"> <label style="padding-top:10px"><i class="fa fa-asterisk magenta"></i> Your Name:</label> <input type="text" name="uname" id="uname" class="span8" placeholder="Please tell us your name"> <label><i class="fa fa-asterisk magenta"></i> Your Business Name:</label> <input type="text" name="business" id="business" class="span8" placeholder="Please tell us your business name"> <label><i class="fa fa-asterisk magenta"></i> Your Review:</label> <textarea name="reviewmsg" id="reviewmsg" class="span8" rows="8" placeholder="Please add your review in here"></textarea> <!--- form errors ---> <div id="dFormErrors" class="row" style="display:none;padding-bottom:20px;"> <span id="sEMessage" class="pull-right"></span> <i class="fa fa-asterisk magenta pull-right"></i> </div> <!--- form buttons ---> <div id="dButtonsReviewForm" class="row"> <a onClick="checkForm()" name="submit" class="cta pull-right">Submit</a> <a href="javascript:hideReviewMe()" class="pull-right cta" style="margin-right:6px">Cancel</a> </div> <!--- form saving ---> <div id="dSavingReviewForm" style="display:none"> <span class="pull-right hibuBtn" style="cursor:wait"><i class="fa fa-spinner fa-spin"></i> Saving</span> </div> 

Here is the JS code:

 /* intercept submit event */ $( "#fReviewMe" ).submit(function(event) { checkForm(); event.preventDefault(); }); /* form validation */ function checkForm(){ var errors = 0; var cuname = $('#uname').val(); var ccompany = $('#business').val() var creview = $('#reviewmsg').val() var cstars = $('#rStar').val() var eMessage = ""; $('#dFormErrors').hide(); $('input').removeClass('validFalse'); $('textarea').removeClass('validFalse'); if ($('#tnc').is(':checked')) { } else{ eMessage = "Please tick to accepts out terms and conditions"; errors++; } if(cstars.length < 1){ $("input").blur(); $("textarea").blur(); eMessage = "Please choose a star rating"; errors++; } if(creview.length < 1){ $('#reviewmsg').focus(); $('#reviewmsg').addClass('validFalse'); eMessage = "Please add your review"; errors++; } else{ $('#reviewmsg').addClass('validTrue'); } if(ccompany.length < 1){ $('#business').focus(); $('#business').addClass('validFalse'); eMessage = "Please tell us your business name"; errors++; } else{ $('#business').addClass('validTrue'); } if(cuname.length < 1){ $('#uname').focus(); $('#uname').addClass('validFalse'); eMessage = "Please tell us your name"; errors++; } else{ $('#uname').addClass('validTrue'); } /* check errors and submit */ if(errors > 0){ $('#dFormErrors').slideDown(); $('#sEMessage').html(eMessage) } else{ $('#dButtonsReviewForm').hide(); $('#dSavingReviewForm').show(); $('#fReviewMe').submit(); } }; 

Thanks in advance

Answer 1

Replace $('#fReviewMe').submit(); on:

 $('#fReviewMe')[0].submit(); 

calling the DOM node submit method to avoid sending the jQuery "loop" handler.

Answer 2

The problem is that you fire the submit event in your submit() handler, causing an infinite loop. You need to change your logic:

 $("#fReviewMe").submit(checkForm); function checkForm(e) { // all your validation logic here... if (errors > 0) { e.preventDefault(); // < stop form submission on error $('#dFormErrors').slideDown(); $('#sEMessage').html(eMessage) } else{ $('#dButtonsReviewForm').hide(); $('#dSavingReviewForm').show(); } }