Javascript Validation On Multiple Select Lists

Thu Jul 30, 2009 9:33 am

Hi,
I just spent the better part of today working through a client side javascript validation challenge for our online VISIONS application. My objective was to alert a user when he or she makes a selection(s) (and/or non-selection) from a multiple drop-down select box where the choices are inputted into an array, as well as for a multiple list selection box where the choices are also placed into an array. I wanted to validate their selection to alert them if they forgot to select one of the values, or if they selected the "Other" choice from the select list but forgot to type the "Other" value in the provided text input field.

The validation was not as intuitive as I had hoped. Here's how I finally solved the first issue in the event a user forgets to select a value(s) from the multiple choice drop-down menu:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var minNum=1; var maxNum=3;
function checkListBoxSize(){
oSelect=document.getElementById("category_id");
var count=0;
for(var i=0;i<oSelect.options.length;i++){
if(oSelect.options[i].selected)
count++;
if(count>maxNum){
alert("Can't select more than 3");
return false;
}
}
if(count<1){
alert("Must select at least one item");
return false;
}
return true;
}

</script>
</head>

<body>
<form onsubmit="return checkListBoxSize()">
<select multiple="multiple" id="category_id" name="category_id" size="10" onchange="return false;">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<input name="" type="submit"/>
</form>
</body>
</html>