[jQuery] [validate] Inserted HTML Removed on Field Focus
I'm using the validation plugin and I'm getting some odd behavior when
displaying errors and then focusing on a field. Here's my jQuery
code:
$('#demo-form').validate({
rules: {
fname: 'required',
lname: 'required',
company: 'required',
title: 'required',
phone: {required: true, phone: true, notDefault: true},
email: {required: true, email: true, notDefault: true}
},
messages: {
fname: 'Please enter your first name.',
lname: 'Please enter your last name.',
company: 'Please provide your company\'s name.',
title: 'Please provide your title.',
phone: 'Provide a valid phone number.',
email: 'Please enter your e-mail address.'
},
errorPlacement: function(error, element) {
error.html('<span></span>' + error.html());
element.addClass('error');
error.insertAfter(element);
error.wrap('<div class="errorContainer"></div>');
}
});
So for a visual effect I'm inserting an empty <span> tag into the
error label, and then visualizing it with CSS. The problem is that
for some reason after errors display, if I focus on a field, that
field's <span> is removed. The error <label> element remains, but the
<span> is removed. I don't have any custom onFocus logic happening
here. Any suggestions as to what's going on?
-Nate