jQuery Validation Plugin: Element with Error 与我的 Wrapper Target 具有相同的 CSS 属性

Question

假设我有一个使用验证插件的页面或多或少如下：

<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://\'<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>

我有作为我包含的 CSS 文件：

.错误{ 背景颜色：#ffc； 边框：1px 实心#c00； 红色; }

所以，基本上我有一个页面，当此字段无法编辑时，会以黄色突出显示该字段并在文本框周围放置一个细红色边框。

效果很好，只是那些相同的属性会传递给显示在

中的错误消息。因为它是一个无序列表，所以每行都有一个红色边框（而且它是一个多行消息，所以它是每一个 LINE 而不仅仅是每个项目符号点）它非常难看。

我想要的 UL 是白色背景上的红色文本，没有边框。

我已经尝试将它添加到 CSS 中：

.errorList { 红色; 背景颜色：白色； 边框样式：无； }

没有效果。

有没有办法将元素之间的 CSS 属性与错误和无序列表中的错误消息解耦？

Answer 1

由于整个列表中有一个<li> 和一个<label>，而另一个是输入本身，您可以将此规则用于元素旁边的消息：

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

这是整个列表：

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

You can give it a try here.