Introduction: In previous articles i explained How to implement Jquery form validations in asp.net and Example to validate asp.net CheckBoxList using jQuery and jQuery to validate file extension and upload image file in asp.net and jQuery stylish dropdown menu example like Facebook,Linkedin and jQuery to Validate email address using RegularExpression and Create drop down menu for login and signup using jQuery and CSS and How to fill dropdownlist with days, month and year and How to validate file extension while uploading image or file through File Upload control and How to read DataKeyName from GridView on SelectedindexChanging event of GridView
In this article i have explained how to validate dropdownlist using jQuery.
Description: If you click on the Submit button without selecting any department then it will show alert/message "Please select Department" otherwise it will show the selected department in the alert box/message box.
Notice i have binded the DropDownList with some static list items.You can also bind DropdownList from the DataBase with the help of my article "How to fill DropDownList from Sql server database"
In this article i have explained how to validate dropdownlist using jQuery.
Description: If you click on the Submit button without selecting any department then it will show alert/message "Please select Department" otherwise it will show the selected department in the alert box/message box.
Notice i have binded the DropDownList with some static list items.You can also bind DropdownList from the DataBase with the help of my article "How to fill DropDownList from Sql server database"
Implementation: Let's create an example web application to see it in action.
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
- In the <HEAD> tag of design page(.aspx) write the following jQuery function to validate the file extension before uploading Image
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#btnSubmit').click(function () {
if ($("#ddlDept").val()
> 0) {
return true;
}
else {
alert('Please
select Department')
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 design page (.aspx) Place DropDownList control and a button control as:
<fieldset style="width:300px;">
<legend>Validate
DropDownList example using Jquery</legend>
<asp:DropDownList ID="ddlDept" runat="server" Height="20px" Width="217px">
<asp:ListItem Text="Select
Department" Value="0"></asp:ListItem>
<asp:ListItem Text="HR" Value="1"></asp:ListItem>
<asp:ListItem Text="Accounts" Value="2"></asp:ListItem>
<asp:ListItem Text="Sales" Value="3"></asp:ListItem>
<asp:ListItem Text="IT" Value="4"></asp:ListItem>
<asp:ListItem Text="Management" Value="5"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</fieldset>
C#.Net Code to validate asp.net
DropDownList control using jQuery
- In the code behind file(.aspx.cs) write the code on Upload Button’s click event as:
protected void
btnSubmit_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), Guid.NewGuid().ToString(),
"alert('You
have selected '+ '" + ddlDept.SelectedItem.Text + "'
+ ' department');", true);
}
VB.Net Code to validate asp.net
DropDownList control using jQuery
- In the design page (.aspx) just change the line <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
with the <asp:Button ID="btnSubmit" runat="server" Text="Submit"/>. Rest is the same
- In the code behind file(.aspx.vb) write the code on Upload Button’s click event as:
Protected Sub btnSubmit_Click(sender
As Object, e
As EventArgs) Handles
btnSubmit.Click
ScriptManager.RegisterClientScriptBlock(Page, Page.[GetType](), Guid.NewGuid().ToString(),
"alert('You
have selected '+ '" + ddlDept.SelectedItem.Text & "'
+ ' department');", True)
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 Department from the DropDownList, it will show the alert message “Please select Department”. If any department is selected then it will show the selected department in the alert/message box.
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."
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..