[jQuery] [validate] Inserted HTML Removed on Field Focus

[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