CODEWITHSUNDEEP
jquerycssjquery-validate
jdepypere
jdepypere

Reputation: 3553

JQuery Validation plugin message style

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>

Upvotes: 5

Views: 47365

Answers (4)

sig
sig

Reputation: 392

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

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

Upvotes: 1

Prateek
Prateek

Reputation: 4500

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);
    }
});

Upvotes: 1

mychalvlcek
mychalvlcek

Reputation: 4046

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

Upvotes: 15

Prateek
Prateek

Reputation: 4500

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".

Upvotes: 4

Related Questions