How to validate dropdown list in JavaScript?
Following example shows you how to validate List-Box / Drop Down Box using JavaScript as client-side validation.
Dropdown box or dropdown list allow the user to select one item per time. We can use default selected item to prevent the user from bypass selection. It can be "Select One" that force the user to select one item from the dropdown list. Before user submit the form, he needs to select one item from the listbox /dropdown. Following examples show you how to validate a dropdown list /dropdown box in JavaScript.A drop down list have two values. One is the display text and other one is option value. Always user see the display text. But the application use the option value. That means after you submit the form, option value is send to the server. Following examples explain how to validate drop down list in different contexts using javaScript.
Also you can validate drop down list using jQuery.
Also you can validate drop down list using jQuery.
1. This example is about ask user to select his age group from the dropdown list.
Here is the example code for validate age group dropdown list using javaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.listbox{border:1px solid #36F;}
.normal_lb_border{border: 1px solid #00F;}
.err_lb_border{border:1px solid #F00;}
.err_lb_bg{background-color:#FFC4C4;}
</style>
<script type="text/javaScript">
function validate_dropdown1(){
var dropdown = document.getElementById('age_group');
var age_group_info=document.getElementById("age_group_info")
if(dropdown.selectedIndex==0){
alert("Please select Age Group");
age_group_info.innerHTML="Select your Age Group";
dropdown.focus();
return false;
}else{
age_group_info.innerHTML="";
alert("You have selected "+dropdown[dropdown.selectedIndex].text+" as your Age Group");
return true;
}
}
</script>
</head>
<body>
<form id="drop_down_validation_1" name="drop_down_validation_1" action="#" method="post" onSubmit="javaScript:return validate_form();">
<table border="0" class="ex_table">
<tbody>
<tr>
<td colspan="3" align="left"> </td>
</tr>
<tr>
<td align="right">Age Group</td>
<td><select name="age_group" class="normal_lb_border" id="age_group">
<option value="0" selected>Select your age group</option>
<option value="1">10-15</option>
<option value="2">16-19</option>
<option value="3">20-25</option>
<option value="4">26-30</option>
<option value="5">31-40</option>
<option value="6">41-50</option>
<option value="7">51-60</option>
<option value="8">61-70</option>
<option value="9">71-80</option>
<option value="10">81-90</option>
<option value="11">91-100</option>
</select>
<label id="age_group_info" style="color: red; font-style: italic;"></label>
</td>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<input name="btnSubmit" type="button" value="Submit" id="btnSubmit" onClick="javaScript:validate_dropdown1();"/>
</td>
<td></td>
</tr>
<tr>
<td colspan="3" align="right"><a href="http://kottawadumi.blogspot.com" target="_self">Programming Help</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>2. Validate Dropdown list - Ask user to select from year and to year from the dropdwon menu.
Example : Suppose you have an application that user have to select from year and to year. You have to check both years are selected and to date must greater than the from date. It is very easy to validate that kind of scenario. try bellow demo code.
Sample code for validate two drop down lists.
<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.listbox{border:1px solid #36F;}
.normal_lb_border{border: 1px solid #00F;}
.err_lb_border{border:1px solid #F00;}
.err_lb_bg{background-color:#FFC4C4;}
</style>
<script type="text/javaScript">
function validate_dropdown2(){
var from_year = document.getElementById('from_year');
var to_year = document.getElementById('to_year');
var from_year_info=document.getElementById("from_year_info");
var to_year_info=document.getElementById("to_year_info");
var error=0;
if(from_year.selectedIndex==0){
error++;
from_year_info.innerHTML="Please select From Year";
}else{
from_year_info.innerHTML="";
}
if(to_year.selectedIndex==0){
error++;
to_year_info.innerHTML="Please select To Year";
}else{
to_year_info.innerHTML="";
}
if(error==0){
if(from_year.value<to_year.value){
alert("Your policy period : "+from_year[from_year.selectedIndex].text+" to "+to_year[to_year.selectedIndex].text);
return true;
}else{
alert("To date must be greater than From date");
to_year.focus();
return false;
}
}else{
alert("Please select your policy period");
return false;
}
}
</script>
</head>
<body>
<form id="drop_down_validation_2" name="drop_down_validation_2" action="#" method="post" onSubmit="javaScript:return validate_dropdown2();">
<table border="0" class="ex_table"><tbody>
<tr><td colspan="3" align="left">Select your policy period</td></tr>
<tr><td align="right">From</td><td><select name="from_year" class="normal_lb_border" id="from_year">
<option value="0">From</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
<label id="from_year_info" style="color: red; font-style: italic;"></label>
</td><td> </td></tr>
<tr><td align="right">To</td><td><select name="to_year" class="normal_lb_border" id="to_year">
<option value="0" selected>To</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
<label id="to_year_info" style="color: red; font-style: italic;"></label>
</td><td> </td></tr>
<tr>
<td align="right"> </td>
<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit"></td>
<td> </td>
</tr>
<tr><td colspan="3" align="right"> </td></tr>
</tbody> </table>
</form>
</body>
</html>3. Validate Birthday (Year, Month, and Day as dropdown boxes)
Sometimes you may need to ask user's birthday for registering purposes. In such situation you can use three select boxes to enter birthday. Then you need to validate user input. This is a simple validation script that checks if the user has correctly entered his/her birthday. Additionally you can check leap years. You have to modify the code for those validations. Think this is helpful for get a basic idea.
Example code for validate birthday dropdown list using javaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.listbox{border:1px solid #36F;}
.normal_lb_border{border: 1px solid #00F;}
.err_lb_border{border:1px solid #F00;}
.err_lb_bg{background-color:#FFC4C4;}
</style>
<script type="text/javaScript">
function isSelected(dropdown){
if(dropdown.selectedIndex==0){
dropdown.className='err_lb_border';
return false;
}else{
dropdown.className='listbox';
return true;
}
}
function validate_dropdown2(){
var year = document.getElementById('birthday_year');
var month = document.getElementById('birthday_month');
var day = document.getElementById('birthday_day');
var error=0;
if(!isSelected(year)){
error++;
}
if(!isSelected(month)){
error++;
}
if(!isSelected(day)){
error++;
}
if((parseInt(year[year.selectedIndex].value)%4==0)&& (parseInt(month[month.selectedIndex].value)==2) && parseInt(day[day.selectedIndex].value)>29){
day.className='err_lb_border';
error++;
}else if(parseInt(month[month.selectedIndex].value)==2 && parseInt(day[day.selectedIndex].value)>28){
day.className='err_lb_border';
error++;
}
if(error>0){
alert("Please select your birthday correctly");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form id="drop_down_validation_3" name="drop_down_validation_3" action="#" method="post" onSubmit="javaScript:return validate_dropdown2();">
<table border="0" class="ex_table"><tbody>
<tr>
<td colspan="6" align="left"> </td></tr>
<tr>
<td align="right">Select your birthday</td>
<td><select id="birthday_year" class="listbox" name="birthday_year"><option selected="" value="0">Year</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option>
</select></td>
<td><select name="birthday_month" class="listbox" id="birthday_month"><option value="0">Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Otc</option><option value="11">Nov</option><option value="12">Dec</option>
</select></td>
<td><select id="birthday_day" class="listbox" name="birthday_day"><option value="0">Day</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select></td>
<td colspan="2" rowspan="4"> </td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit"></td>
<td> </td>
<td> </td>
</tr>
<tr><td colspan="6" align="right"> </td></tr>
</tbody> </table>
</form>
</body>
</html>4. Validate Drop down box - onchange event
Suppose that you have created a form for course registration. The course have two selections. One is week days and other one is weekends. Then you have to select a day for entering classes. In this case you have to validate form according to the user selected course type. Please go through following example and get idea about how to validate dropdown box.
Example code to validate course registration form using javaScript. with dropdown box.
<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.listbox{border:1px solid #36F;}
.normal_lb_border{border: 1px solid #00F;}
.err_lb_border{border:1px solid #F00;}
.err_lb_bg{background-color:#FFC4C4;}
.normal_p{color:#000000;}
.error_p{color:#FF0000;}
</style>
<script type="text/javaScript">
function select_course(){
var course_info = document.getElementById('course_info');
course_info.className='normal_p';
}
function select_class_day(){
var class_day = document.getElementById('class_day');
if(parseInt(class_day[class_day.selectedIndex].value)>0){
class_day.className='listbox';
}else{
class_day.className='err_lb_border';
}
}
function validate_dropdown4(){
var error=0;
var course_type = document.getElementsByName('course_type');
var class_day = document.getElementById('class_day');
var course_info = document.getElementById('course_info');
var mycourse=0;
for(var i=0;i<course_type.length;i++){
if(course_type[i].checked){
mycourse=i+1;
break;
}
}
if(mycourse==0){
error++;
course_info.className='error_p';
}else{
course_info.className='normal_p';
}
var selected_day = parseInt(class_day[class_day.selectedIndex].value);
if(selected_day==0){
class_day.className='err_lb_border';
error++;
}else{
class_day.className='listbox';
}
if(selected_day!=0 && mycourse!=0){
if(mycourse==2 && !(selected_day==6 || selected_day==7)){
class_day.className='err_lb_border';
error++;
}else if(mycourse==1 && !(selected_day!=6 && selected_day!=7)){
class_day.className='err_lb_border';
error++;
}
}
if(error>0){
alert("Please select course details correctly");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form id="drop_down_validation_4" name="drop_down_validation_4" action="#" method="post" onSubmit="javaScript:return validate_dropdown4();">
<table border="0" class="ex_table"><tbody>
<tr>
<td colspan="6" align="left">Course Registration Details</td></tr>
<tr>
<td align="right">Course Type</td>
<td><p id="course_info">
<label>
<input type="radio" name="course_type" value="1" id="course_type_0" onClick="javaScript:select_course();">
Week Days</label>
<br>
<label>
<input type="radio" name="course_type" value="2" id="course_type_1" onClick="javaScript:select_course();">
Weekends</label>
<br>
</p></td>
<td colspan="2" rowspan="3"> </td>
</tr>
<tr>
<td align="right">Class Day</td>
<td><select id="class_day" class="listbox" name="class_day" onChange="javaScript:select_class_day();">
<option value="0" selected>Day</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit"></td>
</tr>
<tr>
<td colspan="4" align="right"> </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
11 comments:
excellent
Hi Duminda,
first, thanks for your blog... really great info!
I am trying out your examples in How to Validate Drop Down List with javascript.. and so far, 2 of the examples do not work. no alert boxes at all.
http://kottawadumi.blogspot.com/2010/01/how-to-validate-drop-down-list-in.html
can you tell me why? what I might be missing.
http://www.vertimax.com/lacrosse-training/drop-down3.html
FireBug displays: ERROR: Permission denied to access property 'toString'
Hi Centurian, Thank you for informing. There was an additional dot(.) in the JavaScript tag declaration. That cause the error. Now its OK. In your example I did not get that error message. Please upgrade the Firefox and firebug to latest versions can check it again.
still getting an FireBug error on the first example's drop list:
http://www.vertimax.com/lacrosse-training/drop-down5.html
FireBug:
validate_dropdown1 is not defined
javaScript:validate_dropdown1();
I removed the extra period as the previous example..??
thanks!
Hi Centurian
Your tag declaration looks like this
<script type="text/javaScript.">
Please remove the period(.) at the end of "javaScript."
Then it should be work fine.
thanks again Duminda! can't believe I missed that!
You are awesome Duminda!! Thanks much all the way from the USA!
hi...
i have a doub regarding multiple dropdown list.for example i am creating
hotel dropdownlist and paymentmode dropdownlist.the problem is i need to validate this 2 lists with diff alert messages within A single form.like if i din't select hotel options u need to print "select hotel", and if i didnt select paymentmode then it needs to alert "enter payment mode" and then both these valiadations completed.then only it needs to go another page..
hi...duminda...
i have a doub regarding multiple dropdown list.for example i am creating
hotel dropdownlist and paymentmode dropdownlist.the problem is i need to validate this 2 lists with diff alert messages within A single form.like if i din't select hotel options u need to print "select hotel", and if i didnt select paymentmode then it needs to alert "enter payment mode" and then both these valiadations completed.then only it needs to go another page..could u please check this problem...
Hi, What about dependent dropdown validation? please also post dependent dropdown validation.
thanks a lot of your blogs
Post a Comment