Как проверить, что пользователь выбрал хотя бы один флажок в CheckBoxList? - PullRequest
Новая
       24

Как проверить, что пользователь выбрал хотя бы один флажок в CheckBoxList?

35 голосов
/ 18 июля 2009

У меня есть элемент управления 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>

Ответы [ 6 ]

60 голосов
/ 18 июля 2009

Это легко сделать на стороне сервера проверки, но я предполагаю, что вы хотите сделать это на стороне клиента?

JQuery может сделать это очень легко, если у вас есть что-то, что объединяет все элементы управления флажками, которые можно использовать как селектор, например, класс (CssClass в вашем элементе управления .NET). Вы можете создать простую функцию JQuery и подключить ее к пользовательскому валидатору ASP.NET. Помните, что если вы все же пойдете по специальному пути валидатора, чтобы убедиться, что вы проверяете его и на стороне сервера, и в случае, если JavaScript не работает, вы не получите бесплатную проверку на стороне сервера, как и другие валидаторы .NET.

Для получения дополнительной информации о пользовательских валидаторах перейдите по следующим ссылкам: www.asp.net и 1012 * 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;
}

Side Note: JQuery - это всего лишь небольшой JS-файл, который вам нужно добавить на свою страницу. После того, как он у вас есть, вы можете использовать все JQuery , которые вам нравятся. Ничего не установить, и он будет полностью поддерживаться в следующей версии Visual Studio.

14 голосов
/ 25 октября 2010

Вот более чистая 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." />

И, наконец, пользовательский валидатор, который позволяет клиентской функции получать целевой элемент управления по идентификатору: 

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);
    }
}
3 голосов
/ 18 июля 2009

Ознакомьтесь с этой статьей от 4 парней из Rolla:

http://aspnet.4guysfromrolla.com/articles/092006-1.aspx

Они показывают, как создать валидатор для элементов управления CheckBox и CheckBoxList, который работает точно так же, как RequiredFieldValidator для других элементов управления .NET. Он имеет проверку на стороне сервера и проверку на стороне клиента. Приятно то, что вы можете указать группу ValidationGroup, и она будет работать с элементом управления ValidationSummary.

В нижней части статьи также есть ссылка для загрузки исходного кода и использования его в вашем проекте. Вы просто ссылаетесь на dll и регистрируете элементы управления, и все готово.

1 голос
/ 31 марта 2017

Вы можете использовать CustomValidator для этого с небольшим количеством JavaScript. 

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Select at least one"
    ClientValidationFunction="checkCheckBoxList"></asp:CustomValidator>

<script type="text/javascript">
    function checkCheckBoxList(oSrc, args) {
        var isValid = false;
        $("#<%= CheckBoxList1.ClientID %> input[type='checkbox']:checked").each(function (i, obj) {
            isValid = true;
        });
        args.IsValid = isValid;
    }
</script>

А для RadioButtonList

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Select at least one" ClientValidationFunction="checkRadioButtonList"></asp:CustomValidator>

<script type="text/javascript">
    function checkRadioButtonList(oSrc, args) {
        if ($("input[name='<%= RadioButtonList1.UniqueID %>']:checked").val() == null) {
            args.IsValid = false;
        } else {
            args.IsValid = true;
        }
    }
</script>
1 голос
/ 16 августа 2013

Вот еще одно решение, которое можно рассмотреть через Dado.Validators на GitHub. 

<asp:CheckBoxList ID="cblCheckBoxList" runat="server">
    <asp:ListItem Text="Check Box (empty)" Value="" />
    <asp:ListItem Text="Check Box 1" Value="1" />
    <asp:ListItem Text="Check Box 2" Value="2" />
    <asp:ListItem Text="Check Box 3" Value="3" />
</asp:CheckBoxList>

<Dado:RequiredFieldValidator runat="server" ControlToValidate="cblCheckBoxList" ValidationGroup="vlgSubmit" />

Пример codebehind.aspx.cs 

btnSubmit.Click += (a, b) =>
{
    Page.Validate("vlgSubmit");
    if (Page.IsValid) {
        // Validation Successful
    }
};

https://www.nuget.org/packages/Dado.Validators/

Ссылка: Проверьте, установлен ли флажок в группе флажков на стороне клиента

0 голосов
/ 18 июля 2009

Перебрать все элементы в ckBoxListReasons. Каждый элемент будет иметь тип «ListItem».

ListItem будет иметь свойство Selected, которое является логическим. Это правда, когда этот элемент выбран. Что-то вроде: 

Dim bolSelectionMade As Boolean = False
For Each item As ListItem in ckBoxListReasons.Items
 If item.Selected = True Then
  bolSelectionMade = True
 End If
Next

bolSelectionMade будет установлен в значение true, если пользователь сделал хотя бы один выбор. Затем вы можете использовать это для установки состояния Valid любого конкретного элемента управления валидатора, который вам нравится.

Надеюсь, это поможет!

Ричард.

...