jquery驗證插件方法/ css問題..需要幫助

Question

我有這個簡單的表單，當字段無效時會出現一些CSS問題。

檢查了這一點： Simple Form with jQuery and Validate plugin

因此，所有的字段是必需的。如果您只是點擊提交按鈕，錯誤字段會有一個很好的黃色背景來提醒您（以及無效的文本）。

問題是選項按鈕。單選按鈕的周圍div不會顯示黃色背景。但是，得到這個。在「amountOther」字段中輸入除＃之外的任何字符，並顯示黃色突出顯示。這讓我感到困惑。爲什麼它不會在第一次嘗試中突出顯示？

想法？

謝謝！

Answer 1

移動AmountOther文本框變成自己<div class="field">

<div class="field" id="radioButtons"> 
    <label>Please select a donation amount or enter the amount you would like to donate below.</label> 
    <div class="option"> 
     <input name="Amount" type="radio" id="amount25" value="25" class="radio" /> 
     <label for="amount25">$25</label> 
    </div> 
    <div class="option"> 
     <input name="Amount" type="radio" id="amount50" value="50" class="radio" /> 
     <label for="amount50">$50 <span>most popular amount</span></label> 
    </div> 
    <div class="option"> 
     <input name="Amount" type="radio" id="amount100" value="100" class="radio" /> 
     <label for="amount100">$100</label> 
    </div> 
    <div class="option"> 
     <input name="Amount" type="radio" id="amount250" value="250" class="radio" /> 
     <label for="amount250">$250</label> 
    </div> 
    <div class="option"> 
     <input name="Amount" type="radio" id="other" value="other" class="radio" /> 
     <label for="other">other <span>(minimum $1 donation)</span></label> 
    </div> 
    <div id="donationErrorMsg"></div> 
</div> 

<div class="field"> 
    <input type="text" class="textbox" name="AmountOther" id="AmountOther" value="" />.00 
</div> 

包含單選按鈕是沒有得到突出，因爲相同div包含AmountOther文本字段（不要求如果其他單選按鈕div沒有被選中）。在同一個div中有兩個字段（Amount和AmountOther），一個是必需的（Amount），另一個不是（AmountOther），因爲它沒有突出顯示。