jquery - I have a lot of repetitive javascript code and would like help cleaning it up -
i have created regular expressions validated inline validation generic form has name, email, address etc.
each input has blur function executed depending on regex being called, within each blur function few things need happen follows:
-if nothing entered, nothing
-if value entered corresponds necessary regex , correct, show checkmark
-if value entered does not correspond necessary regex, show error , show red x
please see code within each if, else if, , else using same code repetitively. there way can create variables or function not have keep on repeating code?
below of code have. works beautifully, feel there simpler/cleaner way of executing not repetitive. new javascript appreciated!
//validate name function validatename(name) { var rename = /^[^0-9!@#$%^&*()]+$/ return rename.test(name); }; //validate address function validateletternum(letnum) { var readdress = /^[a-za-z\s\d\/.]*\d[a-za-z\s\d\/.]*$/ return readdress.test(letnum); }; //name validation (first , last) $(".validname").blur(function(){ var name = $(this).val(); var namecount = name.length; console.log(name + " " + namecount); if (namecount === 0 || namecount == " "){ console.log("nothing entered"); $(this).parent().find(".error").hide(); } else if (validatename(name) && namecount >= 2){ console.log("good!"); // return correct; $(this).parent().find(".error").fadeout(); $(this).parent().find(".correct").fadein(); $(this).parent().find(".incorrect").hide(); } else { console.log("not good"); $(this).parent().find(".error").show(); $(this).parent().find(".correct").hide(); $(this).parent().find(".incorrect").fadein(); } }); //address validation $(".validletnum").blur(function(){ var letnum = $(this).val(); var letnumcount = letnum.length; if (letnumcount === 0 || letnumcount == " "){ console.log("nothing entered"); $(this).parent().find(".error").hide(); } else if (validateletternum(letnum)) { console.log("letnum good!"); $(this).parent().find(".error").hide(); $(this).parent().find(".correct").fadein(); $(this).parent().find(".incorrect").hide(); } else { console.log("letnum not good"); $(this).parent().find(".error").show(); $(this).parent().find(".correct").hide(); $(this).parent().find(".incorrect").fadein(); } });
put in function , call , ['fadeout', 'fadein', 'hide'] example (this works when order fixed)
function foo(t, fn) { $(t).parent().find(".error")[fn[0]](); //.fadeout(); $(t).parent().find(".correct")[fn[1]](); //.fadein(); $(t).parent().find(".incorrect")[fn[2]](); //.hide(); }
an other solution call , object { '.error': 'fadeout', '.correct': 'fadein', '.incorrect': 'hide' }
function foo(t, o) { var i; (i in o) { $(t).parent().find(i)[o[i]](); } }
your sample replaced parts comments
//name validation (first , last) $(".validname").blur(function () { var name = $(this).val(); var namecount = name.length; console.log(name + " " + namecount); if (namecount === 0 || namecount == " ") { console.log("nothing entered"); $(this).parent().find(".error").hide(); } else if (validatename(name) && namecount >= 2) { console.log("good!"); // return correct; foo(this, { '.error': 'fadeout', '.correct': 'fadein', '.incorrect': 'hide' }); //$(this).parent().find(".error").fadeout(); //$(this).parent().find(".correct").fadein(); //$(this).parent().find(".incorrect").hide(); } else { console.log("not good"); foo(this, { '.error': 'show', '.correct': 'hide', '.incorrect': 'fadein' }); //$(this).parent().find(".error").show(); //$(this).parent().find(".correct").hide(); //$(this).parent().find(".incorrect").fadein(); } }); //address validation $(".validletnum").blur(function () { var letnum = $(this).val(); var letnumcount = letnum.length; if (letnumcount === 0 || letnumcount == " ") { console.log("nothing entered"); $(this).parent().find(".error").hide(); } else if (validateletternum(letnum)) { console.log("letnum good!"); foo(this, { '.error': 'hide', '.correct': 'fadein', '.incorrect': 'hide' }); //$(this).parent().find(".error").hide(); //$(this).parent().find(".correct").fadein(); //$(this).parent().find(".incorrect").hide(); } else { console.log("letnum not good"); foo(this, { '.error': 'show', '.correct': 'hide', '.incorrect': 'fadein' }); //$(this).parent().find(".error").show(); //$(this).parent().find(".correct").hide(); //$(this).parent().find(".incorrect").fadein(); } }); function foo(t, o) { //change function name appropriate name var i; (i in o) { $(t).parent().find(i)[o[i]](); } }
Comments
Post a Comment