JQuery - 表单提交 - 多次？答案

【问题标题】：JQuery - Form Submit - Many times?JQuery - 表单提交 - 多次？
【发布时间】：2016-09-14 10:36:36
【问题描述】：

我有一个简短的问题，关于我的 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 多条“提交尝试”消息，然后出现错误：

未捕获的 RangeError：超出最大调用堆栈大小

你们知道为什么会发生这种情况以及如何解决吗？也许关于 submit() 的一些棘手的事情我忘记了？

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

谢谢！

【问题讨论】：

你应该从循环中删除$(form).submit();，因为它会导致多个表单递归提交。
问题是您在提交中再次提交表单，递归调用它
哦，对了！您知道如何在 if 条件下提交表单而不使其进入循环吗？我的意思是：如果条件为真发送表单，否则 preventDefault.... 在条件上不写就足够了？
如果您的 .submit() 事件处理程序在没有e.preventDefault() 的情况下结束，则表单将提交。您可以随时return（注意不要从$.each 中的内联函数返回）

标签： javascript jquery forms submit

【解决方案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();
  }
});

【讨论】：

这仍然会从.submit() 内部调用.submit()，这将有同样的问题（只是更少）。根本不需要最后的.submit()，让事件在不被阻止的情况下完成。
@freedomn-m，你的权利...最后一个 else{} 可以删除，我已经编辑了我的答案。
感谢大家的帮助！我确实像你说的那样：“如果你的 .submit() 事件处理程序在没有 e.preventDefault() 的情况下结束，那么表单将提交。”

【解决方案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;

});

【讨论】：