Example to validate asp.net CheckBoxList using jQuery

Introduction:  In this article i am going to explain How to validate CheckBoxList control using jQuery in asp.net.
How to Validate Asp.Net CheckBoxList using jQuery
In previous articles i explained How to Validate CheckBoxList using JavaScript and Implementing Jquery form validations  and Example to Validate DropDownList using jQuery and Show image preview before uploading through fileupload control using jQuery and Show jQuery notification pop up message box that hide after 5 seconds and Delete multiple selected records based on CheckBox in GridView  and Get CheckBoxList selected items in comma separated format and jQuery to validate file extension and upload image file in asp.net .


Description: In this example i have added static items in the CheckBoxList control. You can also Bind/Fill/Load CheckBoxList with the dynamic data i.e. data from the Sql server database  with the help of my article "How to Fill CheckBoxList from Sql Server table in asp.net"

Implementation: Let's create an asp.net example website to see it in action.
  • In the <HEAD> tag of the design page(default.aspx) write the following 
    <title>Validate Asp.Net CheckBoxList using jQuery</title>

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

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#btnSubmit').click(function () {
            if ($('#cblCourses input:checked').length > 0) {
                return true;
            }
            else {
                alert('Please select at least one skill')
                return false;
            }
        })
    }); 
</script>

     <noscript>  <h3 style="color: #FF3300;">
Javascript is not currently enabled in your browser.<br /> You must <a href="http://support.google.com/bin/answer.py?hl=en&answer=23852" target="_blank">enable Javascript </a> to run this web page correctly.
</h3></noscript>

  • In the <BODY> tag of the design page (.aspx) place a CheckBoxList control, a Button and a Label control. Add some items in the CheckBoxList control as:

<fieldset style="width:260px">
     <legend>Select your skills</legend>
        <asp:CheckBoxList ID="cblCourses" runat="server" RepeatColumns="3">
            <asp:ListItem>Asp.Net</asp:ListItem>
            <asp:ListItem>C#.Net</asp:ListItem>
            <asp:ListItem>VB.Net</asp:ListItem>
            <asp:ListItem>MVC</asp:ListItem>
            <asp:ListItem>jQuery</asp:ListItem>
            <asp:ListItem>JavaScript</asp:ListItem>
        </asp:CheckBoxList>      
        <asp:Button ID="btnSubmit" runat="server" Text="Submit"
            onclick="btnSubmit_Click" />  
             <asp:Label ID="lblStatus" runat="server" Text="" ForeColor="Green"></asp:Label>       

  </fieldset>


Asp.Net C# Code example to validate CheckBoxList using jQuery
  • In the code behind file (default.aspx.cs) write the following code on Button’s click event as:
 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblStatus.Text = "Validation Successfully Passed";

    }

Asp.Net VB Code example to validate CheckBoxList using jQuery
  • Design the form same as above in the C#.Net section but replace the line <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> with the line  <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
  • In the code behind file (default.aspx.vb) write the following code on Button’s click event as:
 Protected Sub btnSubmit_Click(sender As Object, e As System.EventArgs) Handles btnSubmit.Click
        lblStatus.Text = "Validation Successfully Passed"
    End Sub
 
 Note: Have you notice one thing that I have used <noscript> tag in the <Head> section. This is useful in the case if the JavaScript is disabled on the browser running the website. <noscript> tag  executes only if the javaScript is disabled in the browser. jQuery can work only if JavaScript is enabled. So this is the way to detect whether JavaScript is disables or enabled and if disabled then showing appropriate message to enable it from the browser’s setting. 

You can also read my article "How to enable JavaScript in asp.net using C#,VB.Net" to get the detailed knowledge
  • Now run the application and click on submit button without selecting any Skill, it will show the alert message “Please select at least one skill ”. If you select any skill then it will show the "validation Successfully Passed" message.
Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

1 comments:

Click here for comments
September 17, 2013 ×

Thanks Vijay for appreciating my my site..keep reading :)

Congrats bro Lalit Raghuvanshi you got PERTAMAX...! hehehehe...
Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..