Question

我有这个简单的表单，当字段无效时会出现一些CSS问题。

检查一下： Simple Form with jQuery and Validate plugin

所以所有字段都是必需的。如果你只是点击提交按钮，错误字段会得到一个漂亮的黄色背景来提醒你（以及无效的文本）。

问题是选项按钮。单选按钮的周围div不会获得黄色背景。但是，得到这个。在“amountOther”字段中输入除#s之外的任何内容，并显示黄色突出显示。这令我困惑。为什么第一次尝试不会突出它？

想法？

谢谢！

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未突出显示，因为同一div包含AmountOther文本字段（如果未选中其他单选按钮则不需要）。您在同一个Amount中有两个字段（AmountOther和div），一个是必填项（Amount），另一个不是（AmountOther），它没有突出显示。

jquery验证插件方法/ css问题..需要帮助

1 个答案: