Monday 23 September 2013

How to validate CheckBoxList in ASP.NET using JavaScript || Select atleast one item validation for ASP.Net CheckBoxList

HI friends, in this article I will explain about how to validate asp checkboxlist using JavaScript.
First open website or create one website. Take one new webpage and design the webpage as shown in the below figure.

ASP.NET Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Aspdotnet-Kishore:Validate checkboxlist in ASP.NET using JavaScript</title>

    </head>
<body>
    <form id="form1" runat="server">
    <div>
    <h3>Aspdotnet-:Validate checkboxlist in ASP.NET using JavaScript</h3>
     Interests:<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection ="Horizontal" >
            <asp:ListItem Value="Chess">Chess</asp:ListItem>
            <asp:ListItem Value="Carooms">Carooms</asp:ListItem>
            <asp:ListItem Value="Cricket">Cricket</asp:ListItem>
        </asp:CheckBoxList><br />
        <asp:Button ID="Button1" runat="server" Text="Submit" />
    </div>
    </form>
</body>
</html>

And write the below code in the <head> <script> tag as shown below and give the function name in submit button OnClientClick.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Aspdotnet-Kishore:Validate checkboxlist in ASP.NET using JavaScript</title>
    <script type="text/javascript" language ="javascript" >
    function validate()
    {
        var listItems =     document.getElementById("CheckBoxList1").getElementsByTagName("input");
        var itemcount = listItems.length;
        var iCount = 0;
        var isItemSelected = false;
        for (iCount = 0; iCount < itemcount; iCount++) {
            if (listItems[iCount].checked) {
                isItemSelected = true;
                break;
            }
        }
        if (!isItemSelected) {
            alert("Please select an Item.");
        }
        else {
            return true;
        }
        return false;
}
    </script>
    </head>
<body>
    <form id="form1" runat="server">
    <div>
    <h3>Aspdotnet-Kishore:Validate checkboxlist in ASP.NET using JavaScript</h3>
     Interests:<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection ="Horizontal" >
            <asp:ListItem Value="Chess">Chess</asp:ListItem>
            <asp:ListItem Value="Carooms">Carooms</asp:ListItem>
            <asp:ListItem Value="Cricket">Cricket</asp:ListItem>
        </asp:CheckBoxList><br />
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClientClick="return validate();"/>
    </div>
    </form>
</body>
</html>


and the output of above program as shown in the below figure.

If you click on Submit button without selecting any checkbox then it will be like as shown in the below figure.

No comments:

Post a Comment

© 2012-2018 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.