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

[Nathan]

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