CODEWITHSUNDEEP
jqueryhtmlcssvalidationparsley
Mueyiwa Moses Ikomi
Mueyiwa Moses Ikomi

Reputation: 1142

How to Change Error Message CSS Style (Parsley)

This may seem like a spin off but the original question never got an answer and i hope i never loose points for this. So i'm using parsleyjs for my validation, awesome validation by the way but i don't like the way errors are displayed by default.

Usually, it creates a ul tag with a couple li's and the passes the error message into them, this is fine but the problem is that I'm unable to style this li tags. I've tried everything. The list looks like this.

<ul class="parsley-errors-list filled" id="parsley-id-5">
   <li class="parsley-required">Please choose a username</li>
</ul>

In my css i've tried .parsley-error and many other creative ways to style this element but none works. I think it may also be due to the fact that those elements are added to the dom after load time. If anyone has tackled this before, i'd appreciate your help. Thanks in advance.

Upvotes: 2

Views: 6109

Answers (2)

Deepak Pahwa
Deepak Pahwa

Reputation: 31

As i checked parsley giving this html structure for error message.

<ul class="parsley-errors-list filled" id="parsley-id-5">
  <li class="parsley-required">This value is required.</li>
</ul>

I applied this css code to the error message.

.parsley-errors-list li.parsley-required {
    background: green;
    padding: 10px;
    color: #fff;
}

Check the referenced url. I hope this will help you. http://codepen.io/anon/pen/ZpmKZZ?editors=0100

Upvotes: 2

jack
jack

Reputation: 2904

You should be able to target those lis with any number of selectors, regardless of when they're added to the page -

.parsley-errors-list li

.parsley-required

.parsley-errors-list .parsley-required

to name a few. If none of those work, it's probably a specificity issue - inspecting the rendered styles in your browser's dev tools may help you out here.

Upvotes: 2

Related Questions