表单重置导致 jquery.validation 出现“堆栈空间不足”错误答案

【问题标题】：Form Reset causes "out of stack space" error with jquery.validation表单重置导致 jquery.validation 出现“堆栈空间不足”错误
【发布时间】：2014-01-29 21:48:32
【问题描述】：

我有一个表格（最简单的形式）如下所示：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>PC Trade Up - Test </title>
</head>
<body id="tech">
    <div id="page">
        <section id="main">
            <h2>
            Test
            </h2>
            <form action="/tech/migration/test" method="post">
                <input id="test1" name="test1" type="text" value="" />    
                <div>
                    <button type="Submit" id="formSubmit" class="btn">
                        Submit
                    </button>
                    <button type="Reset" id="formReset" class="btn">
                        Reset
                    </button>
                </div>
            </form>
        </section>
    </div>
    <script src="/Scripts/jquery-1.9.1.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/content/js/lib/jquery.form.js"></script>
</body>
</html>

我可以使用此表单并毫无问题地提交。但是，当我点击重置按钮时，我在 IE10 控制台中收到“SCRIPT28：堆栈空间不足”。奇怪的是，我无法在 Firefox 中重现它。

我已经通过删除 jquery.form.js 引用避免了这个问题，但这包含在我的包中。错误似乎是从 jquery.validation.js 中冒出来的。我已将此追溯到该脚本的第 417 行，内容如下：

resetForm: function () {
    if ($.fn.resetForm) {
        $(this.currentForm).resetForm();
    }
    this.submitted = {};
    this.lastElement = null;
    this.prepareForm();
    this.hideErrors();
    this.elements().removeClass(this.settings.errorClass).removeData("previousValue");
},

线

$(this.currentForm).resetForm();

似乎在产生此错误之前递归调用了 254 次迭代，（有道理）。但我无法确定递归的来源。我知道在后代上触发事件会冒泡并导致这种循环，但我看不到我在哪里执行此操作，也没有在此脚本中看到此操作。

对于确定递归或循环的来源有什么建议吗？

【问题讨论】：

$(this.currentForm).resetForm();正在调用 resetForm 并且你得到了一个 stackoverflow！
错误，感谢您的回复。请让我澄清一下。首先，上面的功能不是我自己的。它来自 jquery.validate.js 库，它自己运行良好（没有堆栈溢出）。引用 jquery.form.js 库时出现问题。这也不是我自己的。似乎（我在这里猜测）每个都在处理重置事件并触发另一个，导致堆栈溢出。我的问题是是否有可以防止这种情况的设置（或更新）。有没有其他人在这两个库中遇到过这种情况？
我目前正在调查同样的问题。我现在正在运行一个非常小的测试用例，我认为 jquery.validate.unobtrusive 和 jquery.form 之间存在冲突，两者都将处理程序添加到表单重置事件中。我会及时通知你的。它不是特定于 IE 10 的，我在 8、10 和 11 中都重现了这个。9 可能也受到了影响。
我创建了一个fiddle 来重现该错误。它加载 jQuery 和 jQuery Validation，同时仅包括 jQuery Form Plugin 和 Unobtrusive Validation 的必要部分。在这一点上，我可能会做一些错误报告。
github.com/malsup/form/issues/398

标签： jquery html forms validation internet-explorer-10

【解决方案1】：

我遇到了同样的问题，我可以通过注释掉上述函数来解决它：

    resetForm: function() {
        if ( $.fn.resetForm ) {
            //$(this.currentForm).resetForm();
        }
        this.submitted = {};
        this.lastElement = null;
        this.prepareForm();
        this.hideErrors();
        this.elements().removeClass( this.settings.errorClass ).removeData( "previousValue" );
    },

我知道应该有一些适当的实现，但是这个补丁现在解决了问题，我也在 FF 和 Chrome 中尝试过，它似乎工作正常。

【讨论】：

【解决方案2】：

我不想更改任何现有的 jquery.forms 代码，所以我实现了这是一个单独的 javaScript 文件，在 jquery.form 之后加载。这个脚本应该只为 IE 加载。

(function($) {    
    $.fn.resetForm = resetForm;
    function resetForm() {
        return this.each(function() {
            // guard against an input with the name of 'reset'
            // note that IE reports the reset function as an 'object'
            if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType)) {
                $.fn.resetForm = undefined;
                this.reset();
                $.fn.resetForm = resetForm;
            }
        });
    };
})(jQuery);

【讨论】：

不错的雷。我们曼彻斯特的人对此表示赞赏！