表单提交导致“最大调用堆栈大小超过限制”

Question

我创建了一个用于在网站上对一个人进行评价的表单，但是当提交表单时没有任何反应，控制台显示“Maximum Call Stack Exceeded”。希望有人能够帮助找出代码中的错误，以使其正常工作。以下是表单代码：

 <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>

这是JS代码：

/* 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();
  }

}

提前感谢。

- Sam Allen

Answer 1

将 $('#fReviewMe').submit(); 替换为：

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

通过调用DOM节点方法submit来避免提交jQuery处理程序的“循环”。

- A. Wolff

---

@A. Wolff，感谢您指出除了点击提交之外还有其他可能性，您给了我一个教训。我删除了我的答案，因为它没有考虑到所有可能性。 - fuyushimoya

谢谢，这对我解决问题很有帮助。所以如果我理解正确，Dom Node.submit() 和JQuerySelectedElement.submit() 的调用有所不同？我原本期望在Jquery中选择一个元素时，如果存在相应的Dom函数，则会调用它。但事实并非如此。 - Dominik Sand

另一个关于jQuery验证的例子是： submitHandler: function(form) { form.submit(); } 而不是 $(form).submit(); - Shashank Bhatt