In this article I will explain how to validate (check) HTML Select DropDownList using JavaScript and jQuery.
Validate (Check) HTML Select DropDownList using JavaScript
The following HTML Markup consists of an HTML Select DropDownList and a Button. The HTML Button has been assigned a JavaScript OnClick event handler.
When the Button is clicked, the Validate JavaScript function is executed.
Inside the function, the HTML Select DropDownList object is referenced and if the selected value matches the value of the default item then an error message is displayed using JavaScript alert message box.
Select Fruit:
<select id="ddlFruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<input type="submit" value="Validate" onclick="return Validate()" />
<script type="text/javascript">
function Validate() {
var ddlFruits = document.getElementById("ddlFruits");
if (ddlFruits.value == "") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
</script>
Validate (Check) HTML Select DropDownList using jQuery
The following HTML Markup consists of an HTML Select DropDownList and a Button. The HTML Button has been assigned a jQuery OnClick event handler.
Inside the jQuery OnClick event handler, the HTML Select DropDownList object is referenced and if the selected value matches the value of the default item then an error message is displayed using JavaScript alert message box.
Select Fruit:
<select id="ddlFruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<input type="submit" id="btnSubmit" value="Validate" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
var ddlFruits = $("#ddlFruits");
if (ddlFruits.val() == "") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
});
});
</script>
Screenshot
![Validate (Check) HTML Select DropDownList using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
Download Code
