Share on Google+Share on Google+

Select Box Validation in JavaScript

In this tutorial with the help of an example we will trying to explain how to validate a select box in Java Script.

Select Box Validation in JavaScript

In this section we will discuss about select box validation in JavaScript. Select box allows you to create drop down list and option tag inside the select tag is for available option in the list. The select tag is useful when you have to get the user input from the available options. HTML select Box having same functionality as HTML Checkbox Fields. Select Box allow user to select one or more values from available option. Incorporating a select field into web page is done by <select> tag. And list values are then added to the field using the <option> tag. By default, select box are called drop down down list. Allow only to select single value.

Example : How to Create Select Box:

<option value="Delhi">Delhi</option>
<option value="Bangalore">Bangalore</option>
<option value="Mumbai">Mumbai</option>
<option value="Jaipur">Jaipur</option>

Example : Using this example we have created one JavaScript in which one select box is created name "select your city" in which four option is available. The validation in the select box is, if the user does not select any available option then alert box will display a message that "Please select the city" and if you select one of the city, then it will display the name of the city in alert box. Now, here is the code as follows:

<script language="Javascript">
function validate()
alert ( "Please select city!");
return false;
var sel = document.getElementById("city");
//get the selected option
var selectedText = sel.options[sel.selectedIndex].text;
alert("You have selected : "+selectedText);
return true;
<form name="form" method="post" onSubmit="return validate()"><pre>
Select your City <select name="city" id="city">
<option value="Select">Select</option>
<option value="Delhi">Delhi</option>
<option value="Jaipur">Jaipur</option>
<option value="Agra">Agra</option>
<option value="Bangalore">Bangalore</option>
<option value="Pune">Pune</option>
<input type="submit" name="Submit" value="Submit">

After executing the program the output will be as follows:

When you select one of the option then the output is as follows:

Download Source Code



Posted on: July 22, 2013 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Discuss: Select Box Validation in JavaScript  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image