Limit checkbox selections

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

Limiting selections in the browser

To limit the number selections of a Checkbox add an HTML element to the form (from the “More” tab where you add elements) and enter this code as the content:

1
2
34
5
67
8
9
10
11
12
13
<script>
    jQuery(function ($) {
        var $checkboxes = $('.iphorm_1_1'); 
        $checkboxes.click(function () {
            if ($checkboxes.filter(':checked').length > 2) {                $(this).prop('checked', false);
                $.uniform.update();
                return false;
            }
        });
    });
</script>
<script>
    jQuery(function ($) {
        var $checkboxes = $('.iphorm_1_1');

        $checkboxes.click(function () {
            if ($checkboxes.filter(':checked').length > 2) {
                $(this).prop('checked', false);
                $.uniform.update();
                return false;
            }
        });
    });
</script>
  • On line 3, replace iphorm_1_1 with the unique ID of the Checkbox 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 wp-content/themes/YOUR_THEME/functions.php file (or create a plugin for it).

12
345
6
7
8
9
10
function iphorm_element_valid_iphorm_1_1($valid, $value, $element){
    if (is_array($value) && count($value) > 2) {        $element->addError('Only two choices are allowed');        $valid = false;
    }
 
    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'iphorm_element_valid_iphorm_1_1', 10, 3);
function iphorm_element_valid_iphorm_1_1($valid, $value, $element)
{
    if (is_array($value) && count($value) > 2) {
        $element->addError('Only two choices are allowed');
        $valid = false;
    }

    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'iphorm_element_valid_iphorm_1_1', 10, 3);
  • On lines 1 and 10, replace the three occurrences of iphorm_1_1 with the unique ID of the Checkbox 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 more than the maximum number of selections are chosen when the form is submitted
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy