<...">
Geek Answers Handbook

Reset form raises an error "from stack space" with jquery.validation

I have a form that (in its simplest form) looks like this:

<!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>

I can use this form and submit without problems. When I click the Reset button, however, I get "SCRIPT28: Out of stack space" in the IE10 console. Oddly enough, I cannot reproduce this in Firefox.

I avoided the problem by removing the jquery.form.js link, but this is included in my package. The error seems to bubble from jquery.validation.js. I traced this to line 417 of this script, which reads as follows:

 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"); },

Line

 $(this.currentForm).resetForm();

seems to be recursively called for 254 iterations before creating this error (makes sense). But I can not determine the source of recursion. I understand that triggering an event on a child will cause a bubble and cause such a cycle, but I don’t see where I am doing this, and I don’t see this in this script.

Any suggestions for determining the source of the recursion or loop?

+6
source share
2 answers

I had the same problem and I can solve it by commenting on the above function:

  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" ); },

I know that there must be some kind of correct implementation, but this patch solves the problem at the moment, I also tried in FF and Chrome, and it seems that it works correctly.

+1
source

I did not want to modify any existing jquery.forms code, so I implemented this separate javaScript file, which is loaded after jquery.form. This script should be downloaded only for 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);
+1
source

More articles:


All Articles