驗證表單與單選按鈕

Question

UPDATE：

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> 

Answer 1

這裏是我如何解決問題：希望這可以幫助別人。

<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> 

Answer 2

有很多方法可以做到這一點。

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

當然，你會想通過名稱來選擇（以防萬一您有多個單選按鈕組）

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

Answer 3

在您的「規則」的對象，你應該只能夠做到：

gender: "required" 

或者，你似乎有自定義屬性：

validate="required:true" 

......在你的「男性」收音機上。您應該可以將這兩個輸入添加到name =「gender」，並且該功能也應該可以正常工作。 See the radio/checkbox demo。

如果你想做更復雜的事情，插件可以讓你選擇創建自己的驗證方法。