I have an inputField bound to a multi-select custom Field.
I want to validate that the user picks a max of 3 items from the list, and I want to show a message or an alert when the user selects a forth item right away(not on submission of the form). I found that the actionSupport can help me with that, but I'm not sure if it can allow me to keep track of how many items are selected
<apex:inputField value="{!Agency_Profile.Destination_ Specialties}">
<apex:actionSupport event="onchange" action="{}" />
</apex:inputField>
It's easy to use a JavaScript function. Add this to your page between <script>
and </script>
tags:
var selected = {};
function validate(obj)
{
for (var i = 0; i < obj.options.length; i++) {
if (obj.options[i].selected) {
selected[obj.id+'_'+obj.options[i].value] = obj.options[i].label;
}
else {
selected[obj.id+'_'+obj.options[i].value] = null;
}
}
var size = 0;
for (var key in selected) {
if (selected[key] != null) { size++; }
}
//console.log(size);
if(size > 3){
alert("You can only select a maximum of three options.");
}
}
Then change your <apex:inputField>
to look like this:
<apex:inputField value="{!Agency_Profile.Destination_ Specialties}" onchange="validate(this);"></apex:inputField>
Here's a complete sample Visualforce page:
<apex:page >
<script>
var selected = {};
function validate(obj)
{
for (var i = 0; i < obj.options.length; i++) {
if (obj.options[i].selected) {
selected[obj.id+'_'+obj.options[i].value] = obj.options[i].label;
}
else {
selected[obj.id+'_'+obj.options[i].value] = null;
}
}
var size = 0;
for (var key in selected) {
if (selected[key] != null) { size++; }
}
//console.log(size);
if(size > 3){
alert("You can only select a maximum of three options.");
}
}
</script>
<apex:form >
<apex:selectList id="chooseColor1" size="5" multiselect="true" onchange="validate(this);">
<apex:selectOption itemValue="white" itemLabel="White"/>
<apex:selectOption itemValue="red" itemLabel="Red"/>
<apex:selectOption itemValue="orange" itemLabel="Orange"/>
<apex:selectOption itemValue="green" itemLabel="Green"/>
<apex:selectOption itemValue="blue" itemLabel="Blue"/>
</apex:selectList>
<apex:selectList id="chooseColor2" size="5" multiselect="true" onchange="validate(this);">
<apex:selectOption itemValue="white" itemLabel="White"/>
<apex:selectOption itemValue="red" itemLabel="Red"/>
<apex:selectOption itemValue="orange" itemLabel="Orange"/>
<apex:selectOption itemValue="green" itemLabel="Green"/>
<apex:selectOption itemValue="blue" itemLabel="Blue"/>
</apex:selectList>
</apex:form>
</apex:page>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.