2011-10-15 32 views
0

發生什麼事情是當你只是按下「發送」只有消息正文文本框變成紅色,這意味着errorClass:'errorField'被應用到它應該是,但其他元素不會像他們應該變成紅色。jquery驗證錯誤類不能正常工作

此外,焦點正確轉到消息電子郵件文本輸入,所以也許errorClass正確應用到這一領域,以及後來當您更改焦點到消息主題字段的消息,電子郵件字段應開啓紅。

最後,我該如何讓errorField類覆蓋焦點類?

感謝您的幫助!

HTML:

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 
<link rel="stylesheet" type="text/css" href="style/message.css"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#message-form").validate({ 
     errorClass: 'errorField', 
     errorPlacement: function(error,element) { 
         return true; 
      } 
     }); 
    }); 

</script> 
</head> 
<body> 
    blue = focus, green=notFocus, red=error 
<div id="message-wrapper"> 
    <form id="message-form" method="POST" action=""> 
     <table> 
      <tr> 
       <td width="70px"><label for="message-email">From:</label></td> 
       <td><input type="text" name="message-email" id="message-email" class="message-input required email" /></td> 
      </tr> 
      <tr> 
       <td><label for="message-subject">Subject:</label> </td> 
       <td><input type="text" name="message-subject" id="message-subject" class="message-input required" minlength="5"/></td> 
      </tr> 
      <tr> 
       <td><label for="message-body" style="vertical-align: top">Message:</label> </td> 
       <td><textarea name="message-body" id="message-body" rows="4" cols="40" class="message-input required"></textarea></td> 
      </tr> 
     </table> 

     <input type="hidden" name="contact" value="1" /> 

     <p><button type="submit">Send</button></p> 
    </form> 
</div> 
</body> 

CSS:

div#message-wrapper{ 
    width: 300px; 
    height: 400px; 
} 
input[type="text"], textarea { 
    /* background:#F4F4F4; */ 
    background: green; 
    color: white; 
    border: solid 2px #DFDFDF; 
} 
input[type="text"]:focus, textarea:focus { 
    /* background:#F2F4F8; */ 
    background: blue; 
    color: white; 
    border:solid 2px #333; 
    outline: 0; 
} 
.errorField{ 
    /* background:#faf6d1; */ 
    background: red; 
    color:black; 
    border:solid 1px #333; 
} 
.message-input{ 
    width: 341px; 
} 

回答

0

的選擇有問題:

  • input[type="text"]比更具體,所以背景顏色不會改變
  • 使用input.message-input:focus而不是input[type="text"]:focusinput.message-input.errorField:focus,而不是.errorField