Home Asp.net How to Validate Checkboxlist in jQuery

How to Validate Checkboxlist in jQuery [Quick Solutions]

23
0
How to Validate Checkboxlist in jQuery?
How to Validate Checkboxlist in jQuery?

How to validate CheckBoxList in asp net using JQuery

In my previous tutorials, I’d explained how to validate checkboxlist using javascript, validate radiobuttonlist using jquery, validate dropdownlist using jquery and other more cracking tutorials on CheckBoxList, Asp.net here.

Validation is one of the greatest security features to prevent your website from spam. We can do validation in two ways. One is from client-side another is from server-side validation. Now here in this tutorial, I’ll explain how to validate checkboxlist from client-side using jQuery in asp.net.

Now we are going to implement the code, follow the step-by-step guidelines to validate the checkbox list.

First, we need to give the reference of jQuery under head section. You can simply use the below the line in the head section of your .aspx page.

Add jQuery Reference in Aspx Page

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

After applying jQuery, you are now ready to use jQuery built-in events and functions. Here is the jQuery Script that use to validate CheckBoxList.

Function To Validate Asp.net CheckBoxList Control – [jQuery validate checkbox]

<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=btnSave]").click(function () {
            if ($("[id$=cblImageFormat]").find("input:checked").length > 0) {
                return true;
            } else {
                alert('Please select image format from the list.');
                return false;
            }
        });
    });
</script>

HTML Markup For CheckBoxList Validation – [.aspx]

Following is the complete HTML Markup code for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>CheckBoxList Validation using jQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id$=btnSave]").click(function () {
                if ($("[id$=cblImageFormat]").find("input:checked").length > 0) {
                    return true;
                } else {
                    alert('Please select image format from the list.');
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Select Image Format</td>
                    <td>:</td>
                    <td>
                        <asp:CheckBoxList ID="cblImageFormat" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="1" Text=".jpg" />
                            <asp:ListItem Value="2" Text=".png" />
                            <asp:ListItem Value="3" Text=".gif" />
                        </asp:CheckBoxList>
                    </td>
                </tr>
                <tr><td colspan="3">&nbsp;&nbsp;</td></tr>
                <tr>
                    <td colspan="2">&nbsp;&nbsp;</td>
                    <td>
                        <asp:Button ID="btnSave" runat="server" Text="Save" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Example Result

How to Validate Checkboxlist in jQuery?
How to Validate Checkboxlist in jQuery?

Download Example

Git Repo

That’s it, this is one of the simplest way to validate checkboxlist in asp.net using c# or vb.net.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy coding!

Previous articleAsp.net TextBox: How to Get Set TextBox Value or Text in jQuery
Next articleUpload File to Server Folder for Download in Asp.net using C# Vb.net
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

three × 2 =