I have a form validation script that is unfortunately returning the Stack overflow at line 0 alert box shortly before crashing (IE7) and just straight up crashes in IE8 (It does work first, very slowly).
I have made a jsFiddle for your testing pleasure: http://jsfiddle.net/yuNXm/2/ the stack overflow occurs after you have entered a value into an input which requires validation and then lose it's focus. (the email field is ajax driven so won't function there).
The relevant Javascript:
jQuery(document).ready(function($) {
var inputs = $('input[data-validation-method]');
var fields = $();
var classes = ['fail', 'win'];
//Methods of validation, must return an object like so {result: [boolean], message: [string or false]} as a parameter of the callback() function;
var methods = {
'email' : function(field, dependancies, callback) {
var value = field.val();
var response = false;
field.addClass("loading");
$.post(
ajaxData.url,
{
'action':'validate_form',
'value': value,
'method': field.data('method')
},
function(response){
return callback(response);
}
).complete(function() {
field.removeClass("loading");
});
},
'password' : function(field, dependancies, callback) {
var value = field.val();
var response = {};
if (value.length < 8) {
response.result = false;
response.message = 'Your password must be a minimum of 8 characters';
} else {
response.result = true;
response.message = false;
}
return callback(response);
},
'verify_password' : function(field, dependancies, callback) {
var value = field.val();
var response = {};
if (value != dependancies["password"].val()) {
if (!dependancies["password"].val() || !value) {
return false;
}
response.result = false;
response.message = 'Passwords do no match';
} else {
response.result = true;
response.message = false;
}
return callback(response);
}
}
// Prepare fields for validation
inputs.each(function() {
createField($(this));
});
function createField (field) {
inputs = inputs.not(field);
var method = field.attr('data-validation-method');
var requires = field.attr('data-validation-requires');
if (!!requires) {
requires = requires.split(',');
var dependancies = {};
$.each(requires, function(key, value) {
var element = $('#' + value);
if(element.length) {
dependancies[element.attr('id')] = element;
if(inputs.find(element).length) {
createField(element);
}
if ($.isArray(element.data('linked_fields'))) {
element.data('linked_fields').push(field);
} else {
element.data('linked_fields', [field]);
}
}
});
}
if (methods[method]) {
fields = fields.add('#' + field.attr('id'));
field.data('method', method);
field.data('dependancies', dependancies);
}
}
function validate (field) {
var callback = function(response) {
field.data('response', response);
if (response) {
toggleFlag(field, 'show');
} else {
toggleFlag(field, 'remove');
}
if($.isArray(field.data('linked_fields'))) {
$.each(field.data('linked_fields'), function(key, value) {
validate(value);
});
}
}
methods[field.data('method')](field, field.data('dependancies'), callback);
}
fields.focus(function() {
var field = $(this);
field.data("value", field.val());
field.bind("propertychange keyup input paste", function(event){
if(field.data("response") && (field.val() != field.data("value"))) {
toggleFlag(field, "hide");
if($.isArray(field.data('linked_fields'))) {
$.each(field.data('linked_fields'), function(key, value) {
toggleFlag(value, "hide");
});
}
}
});
});
fields.blur(function() {
var field = $(this);
if (field.val().length) {
if (field.val() != field.data("value")) {
toggleFlag(field, "remove");
validate(field);
} else {
toggleFlag(field, "show");
}
} else {
toggleFlag(field, "remove");
}
});
function toggleFlag (field, method) {
var flag = field.data("flag");
var response = field.data("response");
if (response) {
switch (method) {
case "show":
if (response.message) {
if(!flag) {
flag = $('<span class="pie ' + classes[~~response.result] + '">' + response.message + '</span>').insertAfter(field);
field.data("flag", flag);
flag.hide();
}
if (!flag.data("active")) {
flag.data("active", true);
flag.stop(true, true).animate({height: "show", opacity: "show"}, 500);
}
}
field.addClass(classes[~~response.result]);
break;
case "hide":
if (flag) {
if (flag.data("active")) {
flag.data("active", false);
flag.stop(true, true).animate({height: "hide", opacity: "hide"}, 500);
}
}
field.removeClass(classes[~~response.result]);
break;
case "remove":
if (flag) {
field.removeData("flag");
if (flag.data("active")) {
flag.stop(true, true).animate({height: "hide", opacity: "hide"}, 100, function() {
flag.remove();
});
}
}
field.removeClass(classes[~~response.result]);
field.removeData("response");
break;
}
}
}
});
The relevant HTML:
<form action="" method="post" class="user-data">
<div class="fields">
<label for="email">Email:</label>
<input type="text" name="email" id="email" data-validation-method="email" class="text" value="" placeholder="youremail@somesite.com" />
<span class="info">We won\'t do anything cheeky with your email... promise.</span>
<label for="password">Choose a password:</label>
<input type="password" name="password" id="password" data-validation-method="password" class="text" value="" />
<label for="verify_password">Retype your password:</label>
<input type="password" name="verify_password" id="verify_password" class="text" data-validation-method="verify_password" data-validation-requires="password" value="" />
<input type="checkbox" name="mailing_list" value="true" /> <label for="mailing_list">I would like to recieve email updates about new features</label>
<span class="info">We won\'t spam your inbox, emails will be infrequent.</span>
</div>
<input type="submit" id="submitbtn" class="button omega" name="submit" value="Create your account" />
</form>
Now I know this is normally due to recursion, and I use recursion in two areas of the script.
Recurring function number 1:
function createField (field) {
inputs = inputs.not(field);
var method = field.attr('data-validation-method');
var requires = field.attr('data-validation-requires');
if (!!requires) {
requires = requires.split(',');
var dependancies = {};
$.each(requires, function(key, value) {
var element = $('#' + value);
if(element.length) {
dependancies[element.attr('id')] = element;
if(inputs.find(element).length) {
createField(element);
}
if ($.isArray(element.data('linked_fields'))) {
element.data('linked_fields').push(field);
} else {
element.data('linked_fields', [field]);
}
}
});
}
if (methods[method]) {
fields = fields.add('#' + field.attr('id'));
field.data('method', method);
field.data('dependancies', dependancies);
}
}
Because the stack overflow occurs only when you interact with an input that needs validation, and the createField function is only used as an initialisation function I don't think it is this one.
Recurring function number 2:
function validate (field) {
var callback = function(response) {
field.data('response', response);
if (response) {
toggleFlag(field, 'show');
} else {
toggleFlag(field, 'remove');
}
if($.isArray(field.data('linked_fields'))) {
$.each(field.data('linked_fields'), function(key, value) {
validate(value);
});
}
}
methods[field.data('method')](field, field.data('dependancies'), callback);
}
I don't have access to any other external programs to debug this (corporate environment), can anyone lead me in the right direction here?