jQuery Validation Plugin: Element with Error has same CSS attributes as my Wrapper Target

Question

Let's say I have a page using the Validation Plugin more or less as follows:

<script type="text/javascript">
    $(document).ready(function(){

       $("#addGigForm").validate(
            {
                  messages:
                  {
                    url: { graphicURL: "Please enter a valid web address and file name in Gig Graphic URL.<br /><i>Note: Valid web addresses start with \'http://\' or \'https://\'&lt;br />Supported graphic file formats are JPEG, GIF and PNG</i>" }
                  },

                  errorContainer:"#scheduleErrors",
                  errorLabelContainer:"#scheduleErrors ul",
                  wrapper:"li"
            }
        );
      });


</script>

<table>
    <tr>
        <td>
            <form blah blah blah .....>

               <table align="left" border="0" cellspacing="0">
                   <tr>
                       <td align="right">Gig Graphic URL:&nbsp;</td>
                       <td align="left">
                          <input 
                             type="text" 
                             name="url" 
                             value="" 
                             id="url" 
                             class="graphicURL" 
                             maxlength="3000" 
                             size="64"  />
                       </td>
                   </tr>
                   <tr>
                       <td> <p><input type="submit" value="Submit" /></p></td>
                   </tr>
              </table>

           </form>
        </td>
    </tr>
</table>
<p style="color: red;"><?php echo $message; ?></p>
<div id="scheduleErrors" class="errorList">
   <ul class="errorList">
   </ul>
</div>

I have as CSS file I include that has this:

.error { background-color: #ffc; border: 1px solid #c00; color: red; }

So, basically I have a page that when this field fails the edit, hilights the field in yellow and puts a thin red border around the text box.

Works great except that those same attributes get passed on to the error message that shows up in the <ul class="errorList">. As it is an unordered list, having a red border around every line (and it's a multi-line message, so it's every LINE and not just every bullet point) it's very ugly.

What I want for the UL is red text on a white background, no border.

I've tried adding this to the CSS:

.errorList { color: red; background-color: white; border-style: none; }

It has no effect.

Is there a way to un-couple the CSS attributes between the elemnts with the error and their error messages in the unordered list?

Answer 1

Since one in the overall list a <li> with a <label> inside and the other is the input itself, you can use this rule for the messages bside the elements:

.error { background-color: #ffc; border: 1px solid #c00;  color: red; }

And this for the overall list:

li label.error { background-color: #fff; border: 0; color: red; }

You can give it a try here.