Introduction: In this article i am going to explain How to validate CheckBoxList control using jQuery in asp.net.
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.
You can also read my article "How to enable JavaScript in asp.net using C#,VB.Net" to get the detailed knowledge
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."
1 comments:
Click here for commentsThanks Vijay for appreciating my my site..keep reading :)
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..