You use JavaScript to validate the selection count.
Code:
<script type='text/javascript'>
function validate()
{
var option_count = 0;
for (var i = 0; i < document.getElementById('this_field').length; i++)
{
if (document.getElementById('this_field').options[i].selected)
{
option_count++;
}
}
if (option_count == 0)
{
alert('You must enter at least one value');
return false;
}
else if (option_count > 3)
{
alert('You selected more than three options.');
return false;
}
else
{
return true;
}
}
</script>
<form action=''>
<label for='this_field'>
Occupations:
</label>
<select id='this_field' name='this_field' size='4' multiple='true'>
<option>Accounting</option>
<option>Administrative</option>
<option>Airport</option>
<option>Animal Care</option>
</select>
<input type='submit' name='action' value='Submit' onclick='return validate();'/>
</form>
The validation algorithm checks the count of selected values by accessing the select object via the DOM using the id name of the select field. It checks to see if any selection was made at all, or if more than three values have been selected. It could be just as easily modified to check for only three selections.
The validate() function returns a boolean value, if its true the form submits, if its false the form does not submit.
It should be mentioned that the client-side validation isn't completely foolproof, the user could have javascript disabled.
Regards,
Rich
::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::
Select Menu Multiple Selections
