Home Asp.net RadioButtonList Validation: Validate RadioButtonList using jQuery in Asp.net

RadioButtonList Validation: Validate RadioButtonList using jQuery in Asp.net

10
0

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

Validation is one of the greatest security features to prevent your website against spam. We can do validation in two ways. One is from client-side and another is from server-side validation. Now here in this tutorial, I’ll explain how to proceed with radiobuttonlist validation using JQuery from client-side.

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

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

jQuery Reference

<script type=”text/javascript” src=”http://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 RadioButtonList.

Function To Validate Asp.net Radiobuttonlist Control – [jQuery]

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

HTML Markup For RadioButtonList 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>RadioButtonList Validation using jQuery</title>
<script type=”text/javascript” src=”http://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$=rblImageFormat]”).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:RadioButtonList ID=”rblImageFormat” runat=”server” RepeatDirection=”Horizontal”>
<asp:ListItem Value=”1″ Text=”.jpg” />
<asp:ListItem Value=”2″ Text=”.png” />
<asp:ListItem Value=”3″ Text=”.gif” />
</asp:RadioButtonList>
</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

RadioButtonList Validation using jQuery in Asp.net

Download Example

[wpdm_file id=1]

Git Repo

LEAVE A REPLY

Please enter your comment!
Please enter your name here
Captcha verification failed!
CAPTCHA user score failed. Please contact us!