JQuery Validation plugin message style

Question

I'm styling my error messages of the Jquery Validation plugin and I'm running into some difficulties.

I've already edited the code of the plugin to change language of the messages. I know this can be done with javascript, but it seems better to do it 'hardcoded'. This isn't seen in the live example though.

Here's the live example. I need to insert a <span></span> before the error message somehow, but I can't figure out how to. Any ideas?

To be clear: instead of the plugin showing an elemenent with a class 'error', it should display like so:

<span class='pointer'></span><label class='error'>This is the error</label>

Answer 1

i think your best choice will be wrapper of error element and some CSS styling:

$('#myform').validate({
    errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
    },
    wrapper: 'span'
});

which gives you errors like this:

<span class='arrow'>
    <label class='error'>Error</label>
</span>

and with some CSS you get it done.

span.arrow {
    margin-left: 6px;
    height:17px;
    background: url('http://i45.tinypic.com/f9ifz6.png') no-repeat left center;
}
label.error {
    height:17px;
    border-top:1px solid #99182c;
    border-right:1px solid #99182c;
    border-bottom:1px solid #99182c;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
}

live demo