Bind Blur to Dynamic Form Fields
I have an order form that had lots of input boxes so I wrote a little function to validate them on blur. It looks at all the input's with the input class and assigns blur to them. Problem the user can add up to 75 more inputs and I'm trying to think of a way to do this the easiest. Can I call my function below again after each new row of inputs is created to add the blur function to the newly created form items or will it screw things up. What's the best way for me to do this. I'd like to just loop through them as I do on load.
- $('.input').blur(function() {
val = $(this).val();
if(!$(this).attr('required')) {
$(this).focus();
return false;
}
if(!val.length) {
$(this).next('div').show();
$(this).focus();
return false;
}
switch ($(this).attr('type')) {
case 'email':
if(!validateEmail(val)) {
$(this).next('div').show();
$(this).focus();
return false;
}
break;
case 'tel':
if(!validateUSPhone(val)) {
$(this).next('div').show();
$(this).focus();
return false;
}
break;
case 'zip':
if(!validateUSZip(val)) {
$(this).next('div').show();
$(this).focus();
return false;
}
break;
case 'numeric':
if(!validateNumeric(val)) {
$(this).next('div').show();
$(this).focus();
return false;
}
break;
}
$(this).next('div').hide();
});