Плагин проверки jQuery: элемент с ошибкой имеет те же атрибуты CSS, что и моя цель Wrapper

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, который я включаюэто имеет:

.error {background-color: #ffc;граница: 1px solid # c00;красный цвет;}

Итак, в основном у меня есть страница, которая, когда это поле не проходит редактирование, выделяет поле желтым цветом и помещает тонкую красную рамку вокруг текстового поля.

Прекрасно работает, за исключением тех жеатрибуты передаются в сообщение об ошибке, которое отображается в,Поскольку это неупорядоченный список, иметь красную рамку вокруг каждой строки (и это многострочное сообщение, поэтому каждая LINE , а не только каждая точка маркера) очень уродливо.

Для UL мне нужен красный текст на белом фоне, без рамки.

Я пытался добавить это в CSS:

.errorList {color: red;цвет фона: белый;стиль границы: нет;}

Это не имеет никакого эффекта.

Есть ли способ отвязать атрибуты CSS между elemnts с ошибкой и их сообщениями об ошибках в неупорядоченном списке?

Answer 1

Так как один в общем списке a <li> с <label> внутри, а другой - сам ввод, вы можете использовать это правило для сообщений, окружающих элементы:

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

И это для общего списка:

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

Вы можете попробовать здесь .