I have a page where a user is asked to enter payment details. This includes billing and credit card/checking account information. The initial time they hit this page all the validation rules fire off correctly. They then hit the continue button on the bottom where it takes them to a summary page showing everything they’ve entered and allows them to submit the payment or press the edit button and return to the previous page to update whatever fields they desire.
However, when they are editing, none of the validation rules work any longer.
Yes, yes, I’ve got server side validation implemented as well so this is really just icing on the cake, but it makes the user experience that much better when it doesn’t make them wait for a postback…
I’m using jQuery 1.4.4 with the validation Plugin 1.8.1. There are a lot of validation rules so I’ve split them off into their own .js file which is referenced in my html
I’ve attached the code from my validator js file, keep in mind these ALL work for the initial time, only after revisiting (using Response.Redirect in VB.Net to return to the page) do they stop working.. When debugging with Firebug I’m unable to place any breakpoints inside the $(document).ready() block the second time through..
// JScript File
$.validator.addMethod('postalCode', function (value, element) {
return this.optional(element) || /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A- Z]\d))$/.test(value);
}, 'Please enter a valid US or Canadian postal code.');
$.validator.addMethod('cvnnum', function (value, element) {
return this.optional(element) || /^((\d{3})|(\d{4}))$/.test(value);
}, 'Please enter a valid CVN.');
$.validator.addMethod('CCExp', function(value, element, params) {
var minMonth = new Date().getMonth() + 1;
var minYear = new Date().getFullYear();
var month = parseInt($(params.month).val(), 10);
var year = parseInt($(params.year).val(), 10);
return this.optional(element) || ((year > minYear || (year === minYear && month >= minMonth)));
}, 'Please select a valid expiration date.');
$.validator.addMethod('routingnum', function (value, element) {
// algorithm taken from: http://www.brainjar.com/js/validation/
var t = value;
n = 0;
for (i = 0; i < t.length; i += 3) {
n += parseInt(t.charAt(i), 10) * 3
+ parseInt(t.charAt(i + 1), 10) * 7
+ parseInt(t.charAt(i + 2), 10);
}
// If the resulting sum is an even multiple of ten (but not zero),
// the aba routing number is good.
if (n != 0 && n % 10 == 0)
return true;
else
return (this.optional(element) || false);
}, 'Please enter a valid routing number.');
$.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
//had to rewrite equalTo as it didn't follow the required or depends properties correctly..
$.validator.addMethod("myEqualTo", function (value, element, param) {
return this.optional(element) || value === $(param).val();
}, jQuery.format("You must enter {0}"));
$(document).ready(function () {
$("#form1").validate({
rules: {
PayType: { required: true },
Email: { required: true },
txtCCFullName: { required: isCreditCard },
txtCCFName: { required: isCreditCard },
txtCCLName: { required: isCreditCard },
txtCCNumber: { creditcard: true, required: isCreditCard },
txtCCSecurityNum: { cvnnum: true, required: isCreditCard },
ddlCCExpYear: {
required: isCreditCard,
CCExp: {
month: '#ddlCCExpMonth',
year: '#ddlCCExpYear'
}
},
txtCCAdd1: { required: isCreditCard },
txtCCCity: { required: isCreditCard },
txtCCState: { required: isCreditCard },
txtCCZip: { postalCode: true, required: isCreditCard },
txtAmtOther: {
number: true,
required: function () { return $('input[name=PayType][value=rbtAmtOther]:checked').length > 0; }
},
txtACHRoutingNum: { routingnum: true, required: isACH },
txtACHAcctNum: { number: true, required: isACH },
txtACHFName: { required: isACH },
txtACHLName: { required: isACH },
txtACHAdd1: { required: isACH },
txtACHCity: { required: isACH },
txtACHState: { required: isACH },
txtACHZip: { postalCode: true, required: isACH },
txtPayorEmail: {
email: true,
required: {
depends: function (element) { return $('input[id=rbtEmailYes]:checked').length > 0; }
}
},
txtConfEmail: {
myEqualTo: '#txtPayorEmail',
//required: false
required: {
depends: function (element) {
return ($('div[id=ConfirmEmail]:visible').length > 0) && ($('input[id=rbtEmailYes]:checked').length > 0);
}
}
}
},
messages: {
Email: { required: 'Please answer the payor email question.' },
PayType: { required: 'Please select a payment type.' },
// blank messages suppress the individual error messages
txtCCFullName: { required: '' },
txtCCFName: { required: '' },
txtCCLName: { required: '' },
txtCCNumber: { required: '' },
txtCCSecurityNum: { required: '' },
txtAmtOther: { required: '' },
txtACHFName: { required: '' },
txtACHLName: { required: '' },
txtACHRoutingNum: { required: '' },
txtACHAcctNum: { required: '' },
txtACHAdd1: { required: '' },
txtACHCity: { required: '' },
txtACHState: { required: '' },
txtACHZip: { required: '' },
txtCCAdd1: { required: '' },
txtCCCity: { required: '' },
txtCCState: { required: '' },
txtCCZip: { required: '' },
txtPayorEmail: { required: '' },
txtConfEmail: { required: '', myEqualTo: 'The email addresses do not match.' }
},
onfocusout: function (element) {
// if either of the email fields, immediately validate, otherwise let the normal behavior happen
switch ($(element).attr('id')) {
// validate these on focus lost
case 'txtPayorEmail':
case 'txtConfEmail':
case 'txtCCNumber':
case 'txtCCSecurityNum':
case 'txtCCZip':
case 'txtACHRoutingNum':
case 'txtACHAcctNum':
case 'txtACHZip':
$(element).valid();
break;
default:
$(element).valid();
// do nothing for the others, they get validated on form submit
break;
}
},
errorLabelContainer: $("#form1 div.error"),
ignore: ":hidden",
onkeyup: false
//,debug:true
});
});
function isCreditCard() {
return $('input[name=PayType][value=rbtCC]:checked').length > 0;
}
function isACH() {
return $('input[name=PayType][value=rbtACH]:checked').length > 0;
}
function isEmailed() {
return $('input[id=rbtEmailYes]:checked').length > 0;
}
UPDATE: I’ve now tried this in two browsers, both Firefox and Chrome, and in both, the validation no longer works the 2nd time on the page. so it doesn’t appear to be a FF specific bug, but rather something standardized that I’m messing up…
UPDATE #2: Happens in Opera & IE 8 as well, so that’s the 3rd & 4th browsers now that behave this way. It’s definitely a fundamental problem with my design..
On our test and production site these are running under https, but developing locally it’s just http, the issue occurs under both scenarios.
I’ve tried CTRL-F5 to refresh the page while editing, but the same behaviour remains.
I’ve examined the Live HTTP headers from the 1st vs 2nd times through and there are no discernable differences in how the file is being accessed. All js, files are being loaded both times, with the server responding with HTTP/1.1 200 OK’s for both.
My javascript file is referenced the same as @Ganztoll in the link provided by @Cos Callis, though he’s using PHP and I’m in .NET, fundamentally I don’t see what the difference is between generating the src target dynamically vs leaving it hard coded is. The browser should see the exact same result either way and treat it accordingly… I guess I can give it a shot with a server side include or something..
Any other help or explanations would be greatly appreciated.
Ok, so I’m a dumbass, after revisiting it with a fresh pair of eyes I discovered I was calling
$('#form1').validate.resetForm()in some initialization code that would only ever be triggered when editing the information. After re-working my validation routines to not rely on it and adding/removing the rules dynamically this mysterious issue went away..