Making Life Easier Indoors

Element Part

Element Part

Validating select element in jQuery

<!--StartFragment-->

Checking that at least an option is selected in the select element

<!--EndFragment-->

In this article, we will learn to validate select element (drop down list). That is, we will assure that user selects an option in the select element. If user doesn't selects any option from the select element, an error message is displayed

We will display some food items through a drop down list (select element). We will confirm that the user selects an option from the drop down list when selecting the submit button or else an error message is displayed.

HTML file for "Validating select element in jQuery"

Following is a HTML file that displays a drop down list box containing few food items. The select element with the help of which the drop down list is displayed is assigned the class name ‘infobox' so as to apply the style properties defined in the class selector ‘.infobox' (written in the style sheet file: style.css) can be directly applied to it. The label message: ‘Select the Food Item' is displayed via span element with class name assigned : ‘label'. The error message is displayed via paragraph element with class name assigned as ‘error' and the submit button is assigned a class name: ‘submit'. The HTML code may appear as shown below:

 

 

<form>

 

Select the Food Item

Select a FoodPizza $5HotDog $2Coke $1French Fries $3

 

You have not selected any Option

 

 

 

 

<input class="submit" type="submit" value="Submit" /></p>

 

</form>

 

 

The external style sheet may contain following class selectors that will be automatically applied to the respective HTML element of the specified class:

style.css

.label {float: left; width: 150px; }

.infobox {width: 150px; }

.error { color: red; padding-left: 10px; }

.submit { margin-left: 150px; margin-top: 10px;}

 

In the style sheet file, the class selector: ‘.label' contains the float property set to value: ‘left' so as to make the label appears on its left (creating space for the drop down list to appear on its right) and the width property set to value 150px to define the width that the label can consume. The class selector: ‘.infobox'  contains the width property set to value 150px to specify the width for the drop down list  and the class selector ‘.error' is for assigning red color to the error messages  and for making the error message appear at the distance of 10px from the left side of the browser window. The class selector ‘submit' contains margin-left property set to value 150px to make the Submit button appear at the distance of 150px from the left side of the browser window (so that it appears below the drop down list) and margin-top property set to value 10px to keep some spacing from the above element that may appear (error or result message).

Code for "Validating select element in jQuery"

The jQuery code to confirm that the option from the drop down list is selected is as shown below:

$(document).ready(function() {

$('.error').hide();

$('.submit').click(function(event){

var count=$('select option:selected').val();

if(count==0)

{

$('p.result').hide();

$('.error').show();

}

else

{

$('.error').hide();

$('p.result').show();

$('p.result').text('You have selected '+$('select option:selected').text());

}

event.preventDefault();

});

});

 

In the jQuery code, we initially hide the paragraph element of class ‘error' meant to display error message. Then, we attach a click event to the submit button. The statement:

var count=$('select option:selected').val();

retrieves the value of the option selected from the select element and stores it in variable: count. If the value of count is 0, meaning user has not selected any option, we make the error message appear on the screen by making the paragraph element of class '.error' visible and if the value of count variable is non zero, we make the paragraph element of class 'result' to display the result using the following statement:

You have selected '+$('select option:selected').text());

which displays the text of the option that is selected from the select element

On execution, if we press Submit button without selecting any option from the select element, we get an error message ‘You have not selected any Option' as shown in below given figure :

 

Error message displayed if none option is selected from the select element

If we select any option from the list and select Submit button, we get the message showing the option selected as shown in below given figure :

The text of the selected option of the select element is displayed

This finishes my article on "Validating select element in jQuery"

 

For more information, refer my book : "jQuery Recipes A Problem-Solution Approach" available at : http://www.amazon.com/jQuery-Recipes-Problem-Solution-Approach-Development/dp/1430227095/ref=sr_1_1?ie=UTF8&s=books&qid=1287320549&sr=8-1

 

 

About the Author

B.M.Harwani is founder and owner of Microchip Computer Education (MCE), based in Ajmer, India that provides computer education in all programming and web developing platforms. He graduated with a BE in computer engineering from the of Pune, and also has a 'C' Level (master's diploma in computer technology) from DOEACC, Government Of India. Being involved in teaching field for over 16 years, he has developed the art of explaining even the most complicated topics in a straight forward and easily understandable fashion. He has written several books on various subjects that includes JSP, JSF, EJB, PHP, .Net,  Joomla, jQuery and Smartphones. To know more, visit his blog, http://bmharwani.com/blog

What is a smallest part of an element?

it's atom and in every atom there three componts-electron,proton and neutron...

Gary Oldman interview Cannes Fifth Element part 1

Tags: css, element, element partners, element partners menlo park, element parts, element party, element party sf, javascript, part, parts

This entry was posted on Saturday, September 5th, 2009 at 11:06 pm and is filed under Indoor Major Appliances. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.