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>

mychalvlcek · Accepted Answer · 2013-02-16T19:31:50.273

15

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

edited Feb 16 '13 at 19:31

answered Feb 16 '13 at 19:26

mychalvlcek

3,956
1
19
34

Is there any way to insert two wrappers? I appear to be having an issue due to having a container div. The width of the error makes it so that the error drops down, underneath the input field. Using relative positioning leaves an empty space under the input field, so I need to have 2 elements there, one being relative positioned with in it an absolute positioned wrapper, with in that the error message... – jdepypere Feb 16 '13 at 20:40

score 4 · Answer 2 · answered Feb 16 '13 at 18:49

4

You can use errorElement property to specify what should be the error container. Even if you want to specify class for error-container, you can specify it using errorClass.

See the jquery validate documentation here

For example :

$(".selector").validate({
    errorElement: "em"
});

Sets the error element to "em".

answered Feb 16 '13 at 18:49

Prateek

4,220
1
17
22

I know how to edit the errorElement, but the issue is that the error shouldn't be just an element, it should be two elements, as can be seen in the live example. Sorry if my question isn't that clear. – jdepypere Feb 16 '13 at 18:51
http://stackoverflow.com/questions/860055/jquery-override-default-validation-error-message-display-css-popup-tooltip-lik – Johnny X. Lemonade Feb 16 '13 at 18:52
@arbitter : But in that case, jquery validation will not be able to remove the span you have appended (in case if field does not contain any error) & you have to remove it explicitly, it will be extra headache. So I think, you should try to apply the same css to error container. – Prateek Feb 16 '13 at 19:04
So instead of having the ``, I should use the wrapper method? I'm having some trouble with the positioning: [jsfiddle](http://jsfiddle.net/FaRrR/2/) – jdepypere Feb 16 '13 at 19:07

score 1 · Answer 3 · answered Feb 16 '13 at 21:20

Found the solution, here it is :

HTML :

<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js'></script>Desired error:
<br />
<input type='text' name='username' class='error' />
<span class='arrow'></span>
<label class='error'>Error</label>
<br />
<br />
<br />
<form action='' method='post' id='myform'>
    <input type='text' name='username' required />
    <br />
    <input type='email' name='email' required />
    <br />
    <input type='submit' value='submit' />
</form>

CSS :

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

}

JavaScript :

$('#myform').validate({
    wrapper: 'span',
    errorPlacement: function (error, element) {
        error.css({'padding-left':'10px','margin-right':'20px','padding-bottom':'2px'});
        error.addClass("arrow")
        error.insertAfter(element);
    }
});

That does work good, as vlcekmi3's solution. However now I have another problem: [JSFiddle](http://jsfiddle.net/hu4CV/). As you can see, the errors are displayed under the fields instead of next to them. Also, when repositioning them using `position:relative` leaves empty spaces behind. — jdepypere, Feb 16 '13 at 21:29
You have specified #container div width. Thats why it is not coming properly. If you increase the width of that div, than the problem can be fixed. — Prateek, Feb 17 '13 at 06:55
That's true, but the div shouldn't be wider. The error messages should overlap the border of the div. — jdepypere, Feb 17 '13 at 13:52

score 1 · Answer 4 · edited May 01 '13 at 10:24

1

This works for me when I write this at the end of stylesheet

label.error{}
label.error{
    color:red;
}

edited May 01 '13 at 10:24

Baby Groot

4,637
39
52
71

answered May 01 '13 at 10:03

sig

267
1
10

JQuery Validation plugin message style

4 Answers4