Question

I have this simple form that is having some CSS issues when the field is invalid.

Check this out:
Simple Form with jQuery and Validate plugin

So all the fields are required. If you just hit the submit button the error fields get a nice yellow background to alert you (along with the invalid text).

The issue is the option buttons. The surrounding div of the radio buttons don’t get the yellow background. But, get this. Type anything but #’s in the “amountOther” field and the yellow highlight shows up. it’s baffling me. why won’t it highlight on the first try?

thoughts?

Thanks!

Answer 1

Move the AmountOther text box into its own <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>

The div that contains the radio buttons is not getting highlighted because that same div contains the AmountOther text field (which is not required if the other radio button is not selected). You have two fields (Amount and AmountOther) in the same div, one is required (Amount) and one is not (AmountOther), there for it is not highlighted.