Sunday, December 6, 2009

Validate Multiple-Select List Box


How to validate Multiple-Select List Box Using JavaScript?




Following example shows you to validate Multiple Select List Box in javascript as a client side validation.





Multiple-Select List Boxes allow the user to select more than one list item per time. It returns an array of values when user pressed submit button. The return result containing an array of values. You can run this values in a for loop and check what are the selected items. If there is no selected item in the list box this script prompt the user to select a value. User should select at least one item in the list box. Sometimes you may want to select at least one item from the Multiple-Select List Box and not more than x items (x=any possible value). In this example you can check above requirement. Using this JavaScript you can get total items in the Multiple-Select List Box, Selected Items of the Multiple-Select List Box also.
Following examples show you how to validate a Multiple Select List Box in Javascript.

 






Demo- Validate Multiple Select List Box In JavaScript


Multiple-Select List Box Validation
Select a day and press validate button.

1. Ask user to select at least one item

  From the List Box.

view code
 


2.Get the number of items in the Multiple-Select List Box
view code



3.Get all selected items in the Multiple-Select List Box
view code



4.Select at least one item, but not more than

  three(x number of items) items from the

  Multiple –Select List Box
view code




Try it!





Bookmark and Share





1. Example code for select at least one item from the List Box in JavaScript.

JavaScript Code
<script type="text/javascript" language="javascript">

<!--

function validateListBox(){

var list=document.getElementById("multipleListBox");

var selected_items=0;

for(var i=0;i<list.length;i++){

if(list[i].selected){

selected_items++;

}

}

if(!(selected_items>0)){

alert("Please select at least one item");

return false;

}else{

alert("Ok\nYou have sleeted item(s) from list box");

return false;

}

}



-->

</script>
Html Code


<html>

 <head>

  <title>How to Validate Multiple Select List Box </title>

 </head>

<body>

<table border="0">

<tr>

<td>Select a day and press validate button.</td>

<td align="left"><select name="multipleListBox" size="4" multiple="multiple" id="multipleListBox">

<option value="Sunday">Sunday</option>

<option value="Monday">Monday</option>

<option value="Tuesday">Tuesday</option>

<option value="Wednesday">Wednesday</option>

<option value="Thursday">Thursday</option>

<option value="Friday">Friday</option>

<option value="Saturday">Saturday</option>

</select></td>

</tr>

<tr>

<td>1. Ask user to select at least one item <br />

&nbsp;&nbsp;From the List Box. </td>

<td align="left"><input name="validateMultipleListBox1" type="submit" id="validateMultipleListBox1" value="Validate" onclick="javascript:validateListBox();" /></td>

</tr>

</table>

</body>

</html>
Validate multiple select list box in JavaScript

2. Get the number of items in the multiple select List-Box using JavaScript.

<script type="text/javascript" language="javascript">

<!--
function getTotalListBoxItems(){

var list=document.getElementById("multipleListBox");

alert("No of items in the list box = "+list.length);

return true;

}

</script>
Html Code
<html>

 <head>

  <title>How to get total item of a multiple select list-box in JavaScript </title>

 </head>

<body>

<table border="0">

<tr>

<td>Select a day and press validate button.</td>

<td align="left"><select name="multipleListBox" size="4" multiple="multiple" id="multipleListBox">

<option value="Sunday">Sunday</option>

<option value="Monday">Monday</option>

<option value="Tuesday">Tuesday</option>

<option value="Wednesday">Wednesday</option>

<option value="Thursday">Thursday</option>

<option value="Friday">Friday</option>

<option value="Saturday">Saturday</option>

</select></td>

</tr>

<tr>

<td>2.Get the number of items in the Multiple-Select List Box</td>

<td align="left"><input name="validateMultipleListBox2" type="submit" id="validateMultipleListBox2" value="Validate" onclick="javascript:getTotalListBoxItems();" /></td>

</tr>

</table>

</body>

</html>
Get number of items in the multiple select list box in javascript

3. Get all selected items in the multiple select List-Box using JavaScript.

<script type="text/javascript" language="javascript">

<!--
function getSelectedValuesOfTheListBox(){

var list=document.getElementById("multipleListBox");

var selectd_items="";

for(i=0;i<list.length;i++){

if(list[i].selected){

selectd_items+=list[i].value+"\n";

}

}

if(selectd_items!=""){

alert("Selected items are\n"+selectd_items);

}else{

alert("There are no selected items in the multiple select list box");

}

}
-->

</script>
Html Code
<html>

 <head>

  <title>How to get selected items in a multiple select list box in JavaScript </title>

 </head>

<body>

<table border="0">

<tr>

<td>Select a day and press validate button.</td>

<td align="left"><select name="multipleListBox" size="4" multiple="multiple" id="multipleListBox">

<option value="Sunday">Sunday</option>

<option value="Monday">Monday</option>

<option value="Tuesday">Tuesday</option>

<option value="Wednesday">Wednesday</option>

<option value="Thursday">Thursday</option>

<option value="Friday">Friday</option>

<option value="Saturday">Saturday</option>

</select></td>

</tr>

<tr>

<td>3.Get all selected items in the Multiple-Select List Box</td>

<td align="left"><input name="validateMultipleListBox3" type="submit" id="validateMultipleListBox3" value="Validate" onclick="javascript:getSelectedValuesOfTheListBox();"/></td>

</tr>

</table>

</body>

</html>
Get selected items in a multiple select list box in javascript

4. Select items with a condition in the multiple select List-Box using JavaScript.

<script type="text/javascript" language="javascript">

<!--
function SelectItemsWithCondition(){

var list=document.getElementById("multipleListBox");

var selectd_items=0;

for(i=0;i<list.length;i++){

if(list[i].selected){

selectd_items++;

}

}

if(selectd_items==0){

alert("Please select at least one item");

}else if(selectd_items>3){

alert("Don't select more than three items");

}

}
-->

</script>
Html Code
<html>

 <head>

  <title>How to validate multiple select list-box in JavaScript </title>

 </head>

<body>

<table border="0">

<tr>

<td>Select a day and press validate button.</td>

<td align="left"><select name="multipleListBox" size="4" multiple="multiple" id="multipleListBox">

<option value="Sunday">Sunday</option>

<option value="Monday">Monday</option>

<option value="Tuesday">Tuesday</option>

<option value="Wednesday">Wednesday</option>

<option value="Thursday">Thursday</option>

<option value="Friday">Friday</option>

<option value="Saturday">Saturday</option>

</select></td>

</tr>

<tr>

<td>4.Select at least one item, but not more than<br />

&nbsp;&nbsp;three(x number of items) items from the <br />&nbsp;&nbsp;Multiple –Select List Box</td>

<td align="left"><input name="validateMultipleListBox4" type="submit" id="validateMultipleListBox4" value="Validate" onclick="javascript:SelectItemsWithCondition();" /></td>

</tr>

</table>

</body>

</html>
Custom multiple select list box validation in JavaScript




Useful JavaScript Validations

©-Copyright By Duminda Chamara
JavaScript Validation  

Posted by Duminda Chamara at 6:55 PM

4 comments:

web designer said...

great post, most clear code i ever found related to this type of validations

January 22, 2010 at 3:58 PM
Ian.J.Gough said...

Perfect!
Example 3 was just what i was looking for to complete a script for a client.
Great Post,
Many Thanks for sharing,
Ian

July 18, 2010 at 11:50 PM
Anonymous said...

This looks like a great script validation.Thanx

May 31, 2011 at 12:29 AM
Anonymous said...

Clear explanation, examples and a GREAT help for me today! Thank You!

November 5, 2012 at 3:23 PM

Post a Comment

Subscribe to: Post Comments (Atom)