使用jQuery驗證插件驗證單選按鈕組

120

如何使用jQuery驗證插件爲單選按鈕組（應該選擇一個單選按鈕）執行驗證？使用jQuery驗證插件驗證單選按鈕組

2008-11-10 user27052

外面有一個新的jQuery的驗證，這是非常強大的，易於使用。你可以查看：http：//code.google.com/p/bvalidator/ – Nenad 2011-01-13 13:01:23

不想包含整個庫，只需要這樣簡單的東西 – 2011-02-03 19:07:38

看看c.reeves在http：//的答案forum.jquery.com/topic/jquery-validate-plugin-radio-buttons-dependent-fields – 2010-11-29 18:01:23

使用以下規則來驗證單選按鈕組選擇

myRadioGroupName : {required :true}

myRadioGroupName是你給name屬性值

來源

2009-12-03 21:54:03 Mahes

109

使用jQuery的新版本（1.3+我認爲），你有做的是設定的無線集的成員之一，需要和jQuery將其餘的工作：

<input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> 
<input type="radio" name="myoptions" value="red"> Red<br /> 
<input type="radio" name="myoptions" value="green"> Green

上面將需要噸的至少1他在繼續之前選擇3個無線電選項，並選擇「我的選項」的名稱。

Mahes的標籤建議，順便說一句，奇妙地工作！

來源

2010-07-27 21:01:26

您也可以使用此：

<fieldset> 
<input type="radio" name="myoptions[]" value="blue"> Blue<br /> 
<input type="radio" name="myoptions[]" value="red"> Red<br /> 
<input type="radio" name="myoptions[]" value="green"> Green<br /> 
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label> 
</fieldset>

，只需添加此規則

rules: { 
'myoptions[]':{ required:true } 
}

提及如何添加規則。

來源

2010-08-22 03:48:35

我有同樣的問題。傷心只是爲驗證者寫一個自定義的高亮和不高亮的函數。將此添加到validaton選項應該將錯誤類添加到元素及其相應標籤：

 'highlight': function (element, errorClass, validClass) { 
      if($(element).attr('type') == 'radio'){ 
       $(element.form).find("input[type=radio]").each(function(which){ 
        $(element.form).find("label[for=" + this.id + "]").addClass(errorClass); 
        $(this).addClass(errorClass); 
       }); 
      } else { 
       $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); 
       $(element).addClass(errorClass); 
      } 
     }, 
     'unhighlight': function (element, errorClass, validClass) { 
      if($(element).attr('type') == 'radio'){ 
       $(element.form).find("input[type=radio]").each(function(which){ 
        $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass); 
        $(this).removeClass(errorClass); 
       }); 
      }else { 
       $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); 
       $(element).removeClass(errorClass); 
      } 
     },

來源

2011-05-12 20:56:39 Cin

驗證的另一種方式是這樣的。

var $radio = $('input:radio[name="nameRadioButton"]'); 
$radio.addClass("validate[required]");

我希望我的例子會幫助你

來源

2012-09-13 17:33:51 strudeltercero

按布蘭登的答案。但是，如果您使用的是使用不顯眼驗證的ASP.NET MVC，則可以將data-val屬性添加到第一個。我也喜歡爲每個單選按鈕設置可用性的標籤。對於單選按鈕

<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span> 
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p> 
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p> 
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>

來源

2012-11-08 16:28:00

碼 -

<div> 
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Female",false) Female</span> 
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Male",false) Male</span>               
<div class='GenderValidation' style="color:#ee8929;"></div>  
</div> 

<input class="btn btn-primary" type="submit" value="Create" id="create"/>

和jQuery代碼 -

<script> 
    $(document).ready(function() { 
     $('#create').click(function(){ 

      var gender=$('#Gender').val(); 
      if ($("#Gender:checked").length == 0){ 
       $('.GenderValidation').text("Gender is required."); 
       return false; 
      } 
     }); 
    }); 
</script>

來源

2014-04-01 06:24:41

使用jQuery驗證插件驗證單選按鈕組

回答

相關問題