When we build the form for any input then its required to validate the form before we submit form to the server. We required the variety of the validation like text box validation for input character in jquery, check box selection validation jquery and dropdown validation in jquery.
we can do it both client side and server side validation. But in this tutorial i write dropdown validation in JQUERY. Here i am writing the tutorial about how to validate the dropdown box using jquery in simple one if condition.
First we need to know how to get the value of the selected dropdown in jquery. See the syntax display below:
Syntax:
$(“#DDID option:selected”).val()
In above syntax DDID is the id of the dropdown which we have assigned to the dropdown control which you are going to validate. Now we need to check the dropdown selected value is same as the default value of the dropdown then we display message to select the dropdown value.
See the example below:
<select name=”country” id=”country” >
<option selected=”selected” value=”Select Country”>Select Country</option>
<option value=”1″ >England</option>
<option value=”2″ >India</option>
<option value=”3″ >Usa</option></select>
Now in above example we need to check the dropdown value is Select Country or other using the jquery.
if($(“#country option:selected”).val()==”Select Country ” )
{
$(“#errorMsg”).text(“please select country .”);
return false;}
In above jquery, we have checked the dropdown value is Select Country then we display the message or we can alert the message by using the alert method. If you think about the full example and can work easy for you then please copy and paste the below example into the html page and run it in browser.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dropdown Validation In Jquery</title>
<script src=”http://code.jquery.com/jquery-1.10.2.min.js” type=”text/javascript”></script>
<style>
body{ font-family:Verdana, Geneva, sans-serif}
</style>
</head><body>
<div style=”width:450px;height:200px;margin:auto;padding:50px;border:solid 1px #999;”>
<form onsubmit=”return submitform(this);”>
<h2>Dropdown Validation In Jquery</h2>
<p> <select name=”country” id=”country” >
<option selected=”selected” value=”Select Country”>Select Country</option>
<option value=”1″ >England</option>
<option value=”2″ >India</option>
<option value=”3″ >Usa</option>
</select> </p>
<p><input type=”submit” value=”Submit”></p>
</form>
</div>
<script type=”text/javascript” language=”JavaScript”><!–
function submitform()
{
if($(“#country option:selected”).val()==”Select Country” )
{
alert(“please Select Country.”);
return false;
}
else
{
return true;
}return false;
}
//–>
</script></body>
</html>
If you like the above tutorial for the basic learning and want to learn more this kind of tutorial, visit the following link to find the more tutorials related to jquery.
Best Free Jquery Tutorial Links
