使用单选按钮验证表单答案

【问题标题】：Validating a form with a radio button使用单选按钮验证表单
【发布时间】：2011-05-07 12:02:18
【问题描述】：

更新：

 rules: {
                    firstname: "asdfsadf",
                    lastname: "123123",
                    city: "required",
                    state: "required",
                    country: "required" ,
                    question_1: "required" 


                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname", 
                    city: "Please enter a valid email address",
                    country: "Please accept our policy",
                    question_1: "SELECT at least one question."
                }

    <div class="question"> 
        Q1: What is the second letter of the alphabet? 
        <div class="choices"> 
            <input type="radio" name="question_1" value="1" /> A 
            <input type="radio" name="question_1" value="2" /> B 
            <input type="radio" name="question_1" value="3" /> C 
        </div> 
    </div> 
    <div class="question"> 
        Q2: Which out of these is a berry? 
        <div class="choices"> 
            <input type="radio" name="question_2" value="1" /> Apples 
            <input type="radio" name="question_2" value="2" /> Bananas 
            <input type="radio" name="question_2" value="3" /> Carrots 
        </div> 
    </div>

我正在使用 bassistance jquery 插件来验证我的表单。并且所有其他验证工作正常，但单选按钮给出了问题，我将如何验证单选按钮，我希望用户至少选择一个单选按钮。

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>


<script type="text/javascript">

        $(document).ready(function () { 

            // validate the comment form when it is submitted  
            // validate signup form on keyup and submit
            $("#signupForm").validate({
                rules: {
                    firstname: "asdfsadf",
                    lastname: "123123",
                    city: "required",
                    state: "required",
                    country: "required"  
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname", 
                    city: "Please enter a valid email address",
                    country: "Please accept our policy"
                }
            });  
        });

<form class="cmxform" id="form1" method="get" action="">
    <fieldset>
        <legend>Validating a form with a radio and checkbox buttons</legend>
        <fieldset>
            <legend>Gender</legend>
            <label for="gender_male">
                <input  type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
                Male
            </label>
            <label for="gender_female">
                <input  type="radio" id="gender_female" value="f" name="gender"/>
                Female
            </label>
            <label for="gender" class="error">Please select your gender</label>
        </fieldset>

        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

【问题讨论】：

标签： jquery validation

【解决方案1】：

有很多方法可以做到这一点。

if ($('input:radio:checked').length)
{
 at least one is checked
}
else
{
 none are checked
}

当然，您会希望按名称进行选择（以防万一您有多个单选按钮集）

if ($('input[name="yourNameHere"]:checked').length)

【讨论】：

如果用户没有选择任何单选按钮，我将如何显示错误？我看到你有其他声明，但我不确定这是否是正确的做法？我读了一些东西 myRadioGroupName : {required :true} ???.
@Abu Hamzah 正如我之前提到的，有很多方法可以检查；这是其中之一。将要执行的代码放在else语句中，如果没有选中单选按钮就会执行。

【解决方案2】：

在您的“规则”对象中，您应该能够做到：

gender: "required"

或者，您似乎有自定义属性：

validate="required:true"

...在你的“男性”收音机上。您应该能够将其添加到 name="gender" 的两个输入中，并且应该也可以。 See the radio/checkbox demo.

如果您想做更复杂的事情，该插件可让您选择创建自己的验证方法。

【讨论】：

我有几个单选按钮作为组。

【解决方案3】：

这是我解决问题的方法：希望这对其他人有所帮助。

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>

<div class="question">  
        Q1: What is the second letter of the alphabet?  
        <div class="choices">  
            <input type="radio" name="question_1" value="1" class="required" /> A  
            <input type="radio" name="question_1" value="2" /> B  
            <input type="radio" name="question_1" value="3" /> C  
            <label for="question" class="error">Please select your at leat one question</label>
        </div>  
    </div>

【讨论】：