Using JavaScript to validate a multiple select box is not empty

Question

I'm trying to use JavaScript to validate a multiple select box is not empty. Below is the code I use on all the other input boxes (without [] in the field name).

<script type="text/javascript">
function validateForm()
{
var x=document.forms["escalations"]["SupportGroup[]"].value;
 if (x==null || x=="" || x=="---< Select Delivery Team >---")
   {
   alert("Please select a Support Group.");
   return false;
   }
}
</script>

And it works fine for single input but when I add the “[]” for multiple, it then alerts when an option is chosen or not. Any ideas? Thanks.

The html code is

 <form name="escalations" onsubmit="return validateForm()" action="submitescalation.php?SM=SN" method="post" enctype="multipart/form-data">
 <select id="s0" multiple="multiple" name="SupportGroup[]" onchange="GetCompany();GetTitle();GetContact();" style="height: 25px">
 <option>Company1</option><option>Company2</option><option> Company3</option></select>
 </form>

Answer 1

this should work to get the text of the first option item selected:

var x=document.forms["escalations"]["SupportGroup[] option:selected"].eq(0).text();

or this to get the value of the first option item selected

var x=document.forms["escalations"]["SupportGroup[] option:selected"].eq(0).val();

Answer 2

Maybe something like this:

function validateForm()
{
//var x=document.forms["escalations"]["SupportGroup"].value;
   selects= document.getElementsByTagName('select');
    for(i=0;i<selects.length;i++){
        x=selects[i].value;
 if (x==null || x=="" || x=="---< Select Delivery Team >---")
   {
   alert("Please select a Support Group.");
   return false;
   }
    }
}

http://jsfiddle.net/3qSpv/1/

PS If i understand you correctly - you have more than one select box on page, with same name (and you send values as array to server side script)?

Answer 3

Presumably the first option has a value of "---< Select Delivery Team >---". That really should be part of the label, not one of the options.

If the first option is removed, then you can just use the selected index property to see if an option is selected. In a mulitple select, the selectedIndex will be the index of the first selected option. Therefore, you just need to check that it's 0 or greater (it will be -1 if no option is selected):

if (document.forms["escalations"]["SupportGroup[]"].selectedIndex >= 0) {
  // an option other than the first has been selected
}

If you persist with using the first option as a label, then you need to do a bit more work, presumably to make sure the first isn't selected and that some other option is:

var select =  document.forms["escalations"];
var options = ["SupportGroup[]"].options;

if (select.selectedIndex > 1) {
  // an option other than the first has been selected
  // can end validation here
}

if (select.selectedIndex == 0) {
  // The first option is selected, tell the user to not select it? 

  // See if any other option is selected, start from second
  for (var i=1, iLen=options.length; i<iLen; i++) {

    if (options[i].selected) {
      // an option other than the first has been selected
    }
  }
}

So you can see that if you put the label in a label rather than an option, validation is much simpler.