不小心将无限循环编码到我的 ASP.NET MVC 应用程序的 jQuery 代码中

Question

我在以下JavaScript代码中收到以下错误：

范围错误：超出最大调用堆栈大小

我假设这意味着我不小心在我的JavaScript中编写了一个无限循环。此代码来自使用 jQuery Validate 的 ASP.NET MVC 应用程序。此代码的目的是在提交之前检查页面上捕获的图像。

从本质上讲，这是另一个需要与jQuery Validate一起发生的前端验证。似乎我唯一的选择是在提交表单时运行此代码，特别是因为在单击"提交"按钮和提交之间没有发生其他事件。这是代码：

$('form').submit(function (e) {
    e.preventDefault();
    //If Corporation is selected as business type
    if ($('#businessStructure').val() == "Corporation") {
       //Checks CEO signature present
       if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") {
            alert("Please sign and save your signature in the CEO signature pad");
            $("#ceoError").show();
       }
       else {
           //all good, an image exists
           $('form').submit();
       }
     }
    //If Sole Proprietor is selected as business type
    else if ($('#businessStructure').val() == "SoleProprietor") {
       //Checks CEO signature present
       if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") {
           alert("Please sign and save your signature in the CEO signature pad");
           $("#ceoError").show();
       }
       //Checks partner1 signature present
       if ($("#signImage1").length == 0 || $("#signImage1").attr("src") == "") {
           alert("Please sign and save your signature in the first partner signature pad");
           $("#partner1Error").show();
       }
       else {
           //all good, an image exists
           $('form').submit();
       }
     }
     else {
        //Checks CEO signature present
        if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") {
            alert("Please sign and save your signature in the CEO signature pad");
            $("#ceoError").show();
        }
        //Checks partner1 signature present
        if ($("#signImage1").length == 0 || $("#signImage1").attr("src") == "") {
            alert("Please sign and save your signature in the first partner signature pad");
            $("#partner1Error").show();
        }
            //Checks partner2 signature present
            if ($("#signImage2").length == 0 || $("#signImage2").attr("src") == "") {
                alert("Please sign and save your signature in the second partner signature pad");
                $("#partner2Error").show();
            }
            else {
                //all good, an image exists
                $('form').submit();
            }
     }
});

这是我第一次使用 MVC 应用程序表单提交进行并发活动。有没有我不知道的不同方法？

Answer 1

正如其他人在注释中提到的，您在代码中的表单上调用 submit 方法，这将使整个代码再次执行，包括您的 else 条件，这反过来又调用提交再次，从而导致无限提交事件

else {
           //all good, an image exists
           $('form').submit();
       }

若要解决此问题，可以使用窗体内的按钮 ID 连接事件

<form action="someUrl" method="post">
   <button type="button" id="btn-save">Save</button>
</form>

并且脚本将是

$("#btn-save").click(function(e){
  e.preventDefault();
  // your existing code 
});

为了获得对表单的引用，我建议使用相对选择器获取表单。在这种情况下，closest()方法将很方便

$("#btn-save").click(function(e){
  e.preventDefault();
  var $form = $(this).closest("form");
  if(yourValidationCodeGoesHere)
  {
  }
  else
  {
    $form.submit();
  }
});