Inserting an element within jQuery Validation plugin's error template

I'm utilizing the jQuery Validation plugin for my form. It lets you change the errorElement and wrap the errorElement using with the wrapper option. But, I want to insert an element within errorElement like this:

<label class="error"><em></em>Error message goes here</label>

Is there an easy way to accomplish inserting the em tag?

I've tried prepending the em tag using the errorPlacement option (see below), but it seems the plugin is replacing the contents of errorElement afterwards.

$.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.prepend('<em/>');
        error.insertBefore(element);
    }
});

I've also tried prepending the em tag using the showErrors option (see below). Again, it seems the plugin is replacing the contents of errorElement afterwards.

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        for (var i = 0开发者_如何学Go; i < errorList.length; i++) {
            var error = errorList[i],
                $label = this.errorsFor(error.element),
                $element = $(error.element);

            if ($label.length && $label.find('em').length == 0) {
                $label.prepend('<em/>');
            }
        }

        this.defaultShowErrors();
    }
});

I've also tried modifying the plugin so that when the error element is generated, the <em> tag is prepended. That works until I focus on a form element that has an error, after which the em tag is removed. (It's doing this because jQuery validation is constantly updating the contents of the error element as I focus and/or type in the field, therefore erasing my em tag added at error-element creation.)

You could use the showErrors function to customize how errors are shown:

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        if (errorList.length < 1) {
            // clear the error if validation succeeded
            $('label.error').remove();
            return;
        }
        $.each(errorList, function(index, error) {
            $(error.element).next('label.error').remove();
            $(error.element).after(
                $('<label/>')
                    .addClass('error')
                    .append($('<em/>').text('this is some em'))
                    .append(error.message)
            );
        });
    }
});    

You can see it in action here.

I tried Darin's solution but faced two issues :

• With multiple fields, the error messages were not correctly removed when fields went valid.
• I couldn't use the success callback to change the error label to an 'Ok' label

I ended up with the following code that modify the error message before calling the default behaviour with defaultShowErrors

$('#my_form').validate({
    showErrors: function(errorMap, errorList) {
    var i, elements;
    for(i = 0; errorList[i]; i++) {
        errorList[i].message = "<em> " + errorList[i].message + "</em>"
    }
    this.defaultShowErrors()    
    }
});

I actually solved this by modifying the plugin, but will accept any (efficient) solution posted that doesn't involve modifying it.

What I did was add two new options, appendToError and prependToError to the plugin. Whatever is specified in these options will always be appended or prepended within the error element.

https://github.com/simshaun/jquery-validation/commit/bff7ba55d1d60ee0bac033989256a932185e7a97

(After learning a bit more about the plugin's inner workings, I don't think there is any possible way of doing what I want without modifying it, short of implementing something extremely inefficient.)