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);
  • On line 1, replace 1_3 with the unique ID of the Multi Select element
  • On line 2, replace the number 2 with the maximum number of selections allowed
  • On line 3, replace Only two choices are allowed with the error message to display
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);
  • On lines 1 and 10, replace the three occurrences of 1_3 with the unique ID of the Multi Select element
  • On line 3, replace the number 2 with the maximum number of selections allowed
  • On line 4, replace Only two choices are allowed with the error message to display
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy