jQuery validation doesn't work 2nd time on page -
i have page user asked enter payment details. includes billing , credit card/checking account information. initial time hit page validation rules fire off correctly. hit continue button on bottom takes them summary page showing they've entered , allows them submit payment or press edit button , return previous page update whatever fields desire.
however, when editing, none of validation rules work longer.
yes, yes, i've got server side validation implemented icing on cake, makes user experience better when doesn't make them wait postback...
i'm using jquery 1.4.4 validation plugin 1.8.1. there lot of validation rules i've split them off own .js file referenced in html
i've attached code validator js file, keep in mind these work initial time, after revisiting (using response.redirect in vb.net return page) stop working.. when debugging firebug i'm unable place breakpoints inside $(document).ready()
block 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 valid or canadian postal code.'); $.validator.addmethod('cvnnum', function (value, element) { return this.optional(element) || /^((\d{3})|(\d{4}))$/.test(value); }, 'please enter 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 valid expiration date.'); $.validator.addmethod('routingnum', function (value, element) { // algorithm taken from: http://www.brainjar.com/js/validation/ var t = value; n = 0; (i = 0; < t.length; += 3) { n += parseint(t.charat(i), 10) * 3 + parseint(t.charat(i + 1), 10) * 7 + parseint(t.charat(i + 2), 10); } // if resulting sum multiple of ten (but not zero), // aba routing number good. if (n != 0 && n % 10 == 0) return true; else return (this.optional(element) || false); }, 'please enter 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 valid phone number"); //had rewrite equalto didn't follow 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 payor email question.' }, paytype: { required: 'please select payment type.' }, // blank messages suppress 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 not match.' } }, onfocusout: function (element) { // if either of email fields, validate, otherwise let 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(); // nothing others, 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 tried in 2 browsers, both firefox , chrome, , in both, validation no longer works 2nd time on page. doesn't appear ff specific bug, rather standardized i'm messing up...
update #2: happens in opera & ie 8 well, that's 3rd & 4th browsers behave way. it's fundamental problem design..
on our test , production site these running under https, developing locally it's http, issue occurs under both scenarios.
i've tried ctrl-f5 refresh page while editing, same behaviour remains.
i've examined live http headers 1st vs 2nd times through , there no discernable differences in how file being accessed. js, files being loaded both times, server responding http/1.1 200 ok's both.
my javascript file referenced same @ganztoll in link provided @cos callis, though he's using php , i'm in .net, fundamentally don't see difference between generating src target dynamically vs leaving hard coded is. browser should see exact same result either way , treat accordingly... guess can give shot server side include or something..
any other or explanations appreciated.
ok, i'm dumbass, after revisiting fresh pair of eyes discovered calling $('#form1').validate.resetform()
in initialization code ever triggered when editing information. after re-working validation routines not rely on , adding/removing rules dynamically mysterious issue went away..
Comments
Post a Comment