Question

JQuery - 表单提交 - 多次？

2016-09-14

505

javascript jquery forms submit

我有个小问题，在我的 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: Maximum call stack size exceeded

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

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

谢谢！

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

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;

});