Limit multi select selections

Limiting selections in the browser

To limit the number selections of a Multi Select element add the following code to Forms → Settings → Custom CSS & JS → Custom JavaScript.

1
23
4
5
67
8
9
10
11
12

jQuery(function ($) {
    $('.quform-field-1_3').on('change', function () {        var $this = $(this),
            value = $this.val();
 
        if (value !== null && value.length > 2) {            $this.val(this.lastValidValue || null).trigger('change');
        } else {
            this.lastValidValue = value;
        }
    }).trigger('change');
});

jQuery(function ($) {
    $('.quform-field-1_3').on('change', function () {
        var $this = $(this),
            value = $this.val();

        if (value !== null && value.length > 2) {
            $this.val(this.lastValidValue || null).trigger('change');
        } else {
            this.lastValidValue = value;
        }
    }).trigger('change');
});

• On line 2, replace 1_3 with the unique ID of the Multi Select element
• On line 6, replace the number 2 with the maximum number of selections allowed

Server-side validation

Using the above code it’s still possible for the form to be submitted with more than the allowed maximum number of selections, for example if JavaScript is disabled. You can prevent the form from being submitted and display a validation error if the form is submitted with more than the maximum number of selections by using a Custom validator. Add the following code to the theme functions.php file (or create a plugin for it).

1234
5
6
7
8

add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Multiselect $element) {    if (is_array($value) && count($value) > 2) {        $element->addError('Only two choices are allowed');        $valid = false;
    }
 
    return $valid;
}, 10, 3);

add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Multiselect $element) {
    if (is_array($value) && count($value) > 2) {
        $element->addError('Only two choices are allowed');
        $valid = false;
    }

    return $valid;
}, 10, 3);

12
345
6
7
8
9
10

function quform_element_valid_1_3($valid, $value, Quform_Element_Multiselect $element){
    if (is_array($value) && count($value) > 2) {        $element->addError('Only two choices are allowed');        $valid = false;
    }
 
    return $valid;
}
add_filter('quform_element_valid_1_3', 'quform_element_valid_1_3', 10, 3);

function quform_element_valid_1_3($valid, $value, Quform_Element_Multiselect $element)
{
    if (is_array($value) && count($value) > 2) {
        $element->addError('Only two choices are allowed');
        $valid = false;
    }

    return $valid;
}
add_filter('quform_element_valid_1_3', 'quform_element_valid_1_3', 10, 3);