web-dev-qa-db-fra.com

Comment valider un utilisateur a choisi au moins une case à cocher dans une CheckBoxList?

J'ai un contrôle CheckBoxList que je veux obliger l'utilisateur à cocher au moins UNE case, peu importe s'ils cochent chacun, ou 3, ou même juste un.

Dans l'esprit des contrôles de validation d'asp.net, que puis-je utiliser pour appliquer cela? J'utilise également l'extension de validation Ajax, donc ce serait bien si cela pouvait ressembler à d'autres contrôles, et non à une méthode de validation de serveur ringard dans le codebehind.

<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>
asp.net.netvalidationcheckboxcheckboxlist
35
John Batdorf

Il est facile de faire cette validation côté serveur, mais je suppose que vous voulez le faire côté client?

JQuery peut le faire très facilement tant que vous avez quelque chose que tous les contrôles de case à cocher ont en commun à utiliser comme sélecteur tel que class (CssClass sur votre contrôle .NET). Vous pouvez créer une simple fonction JQuery et la connecter à un validateur personnalisé ASP.NET. N'oubliez pas que si vous suivez la route du validateur personnalisé pour vous assurer de la vérifier côté serveur également, au cas où javascript ne fonctionne pas, vous n'obtenez pas de vérification côté serveur gratuite comme les autres validateurs .NET.

Pour plus d'informations sur les validateurs personnalisés, consultez les liens suivants: www.asp.net et MSDN

Vous n'avez pas besoin d'utiliser JQuery , cela rend simplement la fonction javascript pour itérer et regarder tous les contrôles de vos cases à cocher beaucoup plus facilement mais vous pouvez simplement utiliser le javascript Vanilla si vous le souhaitez.

Voici un exemple que j'ai trouvé sur: Lien vers l'original

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

Note latérale: JQuery est juste un petit fichier js que vous devez ajouter à votre page. Une fois que vous l'avez inclus, vous pouvez utiliser tous les JQuery que vous aimez. Rien à installer et il sera entièrement pris en charge dans la prochaine version de Visual Studio je pense.

60
Kelsey

Voici une mise en œuvre plus propre jQuery qui permet une ClientValidationFunction pour n'importe quel nombre de contrôles CheckBoxList sur une page:

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;
        }
    });
}

Voici le balisage:

<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." />

Et enfin, le validateur personnalisé qui permet à la fonction client de récupérer le contrôle cible par 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);
    }
}
14
Nariman

Consultez cet article de 4 Guys From Rolla:

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

Ils vous montrent comment créer un validateur pour les contrôles CheckBox et CheckBoxList qui fonctionne exactement comme le RequiredFieldValidator pour les autres contrôles .NET. Il a la validation côté serveur et la validation côté client. La partie agréable à ce sujet est que vous pouvez spécifier un groupe de validation et cela fonctionnera avec le contrôle ValidationSummary.

Il existe également un lien en bas de l'article pour télécharger la source et l'utiliser dans votre projet. Vous venez de référencer la DLL et d'enregistrer les contrôles et vous êtes prêt à partir.

3
Austin

Vous pouvez utiliser un CustomValidator pour cela avec un peu de 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>

Et pour un 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
VDWWD

Voici une autre solution qui peut être envisagée via Dado.Validators sur 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" />

Exemple de codebehind.aspx.cs

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

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

Ref: Vérifier si une case à cocher est cochée dans un groupe de cases à cocher côté client

1
roydukkey

Parcourez chacun des éléments de ckBoxListReasons. Chaque élément sera de type 'ListItem'.

Le ListItem aura une propriété appelée "Selected" qui est un booléen. C'est vrai lorsque cet élément est sélectionné. Quelque chose comme:

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

bolSelectionMade sera défini sur true si l'utilisateur a effectué au moins une sélection. Vous pouvez ensuite l'utiliser pour définir l'état valide de tout contrôle de validateur particulier que vous aimez.

J'espère que cela t'aides!

Richard.

0
Richard