如何验证用户在CheckBoxList中选择了至少一个复选框？

Question

我有一个CheckBoxList控件,我想让用户检查至少一个盒子,如果他们检查每一个,或3个,甚至只是一个,都没关系.

本着asp.net的验证控件的精神,我可以使用什么来强制执行此操作？我也在使用Ajax验证扩展器,所以如果它看起来像其他控件,而不是代码隐藏中的一些俗气的服务器验证方法,那将会很好.

<asp:CheckBoxList RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="3" ID="ckBoxListReasons" runat="server">
    <asp:ListItem Text="Preliminary Construction" Value="prelim_construction" />
    <asp:ListItem Text="Final Construction" Value="final_construction" />
    <asp:ListItem Text="Construction Alteration" Value="construction_alteration" />
    <asp:ListItem Text="Remodel" Value="remodel" />
    <asp:ListItem Text="Color" Value="color" />
    <asp:ListItem Text="Brick" Value="brick" />
    <asp:ListItem Text="Exterior Lighting" Value="exterior_lighting" />
    <asp:ListItem Text="Deck/Patio/Flatwork" Value="deck_patio_flatwork" />
    <asp:ListItem Text="Fence/Screening" Value="fence_screening" />
    <asp:ListItem Text="Landscape - Front" Value="landscape_front" />
    <asp:ListItem Text="Landscape - Side/Rear" Value="landscape_side_rear" />
    <asp:ListItem Text="Other" Value="other" />
</asp:CheckBoxList>

Answer 1

这个验证服务器端很容易,但我假设你想做客户端吗？

只要您拥有所有复选框控件共有的东西作为选择器(如类(.NET控件上的CssClass)),JQuery就可以非常轻松地完成此操作.您可以创建一个简单的JQuery函数并将其连接到ASP.NET自定义验证器.请记住,如果你确实去了自定义验证程序路由以确保在javascript不工作的情况下检查服务器端,则不会像其他.NET验证程序那样获得免费的服务器端检查.

有关自定义验证器的更多信息,请查看以下链接:www.asp.net和 MSDN

你不需要使用JQuery,它只是使javascript函数迭代并更容易地查看所有的复选框控件,但如果你愿意,你可以使用vanilla javascript.

以下是我在以下网站找到的示例:链接到原始版本

<asp:CheckBoxList ID="chkModuleList"runat="server" >
</asp:CheckBoxList>

<asp:CustomValidator runat="server" ID="cvmodulelist"
  ClientValidationFunction="ValidateModuleList"
  ErrorMessage="Please Select Atleast one Module" ></asp:CustomValidator>

// javascript to add to your aspx page
function ValidateModuleList(source, args)
{
  var chkListModules= document.getElementById ('<%= chkModuleList.ClientID %>');
  var chkListinputs = chkListModules.getElementsByTagName("input");
  for (var i=0;i<chkListinputs .length;i++)
  {
    if (chkListinputs [i].checked)
    {
      args.IsValid = true;
      return;
    }
  }
  args.IsValid = false;
}

附注:JQuery只是一个小js文件包含你需要添加到你的页面.一旦你有它,你可以使用你喜欢的所有JQuery.没有什么可以安装的,我想在下一版本的Visual Studio中将完全支持它.

Answer 2

这是一个更简洁的jQuery实现,它允许一个ClientValidationFunction用于页面上的任意数量的CheckBoxList控件:

function ValidateCheckBoxList(sender, args) {
    args.IsValid = false;

    $("#" + sender.id).parent().find("table[id$="+sender.ControlId+"]").find(":checkbox").each(function () {
        if ($(this).attr("checked")) {
        args.IsValid = true;
        return;
        }
    });
}

这是标记:

<asp:CheckBoxList runat="server"
          Id="cblOptions" 
          DataTextField="Text" 
          DataValueField="Id" />

<xx:CustomValidator Display="Dynamic" 
              runat="server" 
              ID="cblOptionsValidator"
              ControlId="cblOptions"
              ClientValidationFunction="ValidateCheckBoxList" 
              ErrorMessage="One selection required." />

最后,自定义验证器允许客户端函数通过ID检索目标控件:

public class CustomValidator : System.Web.UI.WebControls.CustomValidator
{
    public string ControlId { get; set; }

    protected override void OnLoad(EventArgs e)
    {
        if (Enabled)
            Page.ClientScript.RegisterExpandoAttribute(ClientID, "ControlId", ControlId);

        base.OnLoad(e);
    }
}