JQuery - 表单提交 - 多次？

Question

我有一个简短的问题，我的JavaScript代码中有这样一段：

 $('form').submit( function (e) {
  var form = $(this);
  console.log('submit attempt');
  $('input, select, textarea').each(function() {
   var attr = $(this).attr('required');
   if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '') ) {
    if($(this).hasClass('numeric')) {
     if(isNumber($(this).val())) {
      $(form).submit();
     }
    }
    else {
     $(form).submit();
    }
   }
   else {
    e.preventDefault();
    $(this).css('border','1px solid red');
   }
  });
 });

在控制台日志中，我收到了超过1300条“提交尝试”消息，然后出现了一个错误：

Uncaught RangeError：调用栈大小超过最大值

你们有什么想法为什么会发生这种情况以及如何解决它吗？也许我忘记了submit()的一些棘手问题？

如果需要更多信息，请告诉我。

谢谢！

- Praem

---

你应该从循环中删除 $(form).submit();，因为它会导致多次递归提交表单。 - Hardik Patel

问题在于您在提交表单时再次提交了它，从而递归调用。 - Shubham Khatri

哦，对了！你知道我怎么在if条件下提交表单而不将其变成循环吗？我的意思是：如果条件为真，则发送表单，否则阻止默认操作...在条件中什么都不写就可以了吗？ - Praem

如果您的.submit()事件处理程序在没有e.preventDefault()的情况下到达结尾，则表单将被提交。您可以随时使用return（要小心，不要从内联函数中返回，例如$.each）。 - freedomn-m

Answer 1

如果没有错误，表单将提交每个输入或文本区域。

因此，首先循环字段，定义是否存在故障。如果没有，则发送它：

$('form').submit(function(e) {
  var form = $(this);
  var failure = false;
  console.log('submit attempt');
  $('input, select, textarea').each(function() {
    var attr = $(this).attr('required');
    if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '')) {
      failure = true;
      $(this).css('border', '1px solid red');
    }
    if ($(this).hasClass('numeric') && !isNumber($(this).val())) {
      failure = true;
      $(this).css('border', '1px solid red');
    }
  });
  if (failure) {
    e.preventDefault();
  }
});

- GreyRoofPigeon

---

这仍然在 .submit() 中调用 .submit()，这将导致相同的问题（只是程度较小）。只需省略最后的 .submit()，让事件完成而不被阻止即可。 - freedomn-m

@freedomn-m，你是对的... 最后的 else{} 可以被删除，我已经编辑了我的答案。 - GreyRoofPigeon

谢谢大家的帮助！我按照你们说的做了：“如果您的.submit()事件处理程序在没有e.preventDefault()的情况下到达末尾，则表单将提交。” - Praem

Answer 2

问题在于您正在提交表单，而在提交中又调用了它，导致递归。这是正确的做法：如果验证失败，则 isValid 为 false 并阻止表单提交；

    $('form').submit(function(e){
var isValid = true;
    $('input, select, textarea').each(function() {
            var attr = $(this).attr('required');
            if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '') ) {
                if($(this).hasClass('numeric')) {
                    if(!isNumber($(this).val())) {
                        isValid = false;
            return isValid;
                    } else {
                          e.preventDefault();
                          $(this).css('border','1px solid red');
                     }
                }

            }
            else {
        e.preventDefault();
                $(this).css('border','1px solid red');
        isValid = false;
        return isValid;
            }
        });
  return isValid;

});

- Shubham Khatri