Checkbox: minimum number of choices code not working

Hello, anyone here?

Hi @visedfaq,

Thanks for reaching out!

The code snippets in our guide on how to set a minimum number of choices for a Checkbox worked for me. For your reference, I created this screencast.

In case it helps, here’s our tutorial with the most common ways to add custom code like this.

For the most beginner-friendly option in that tutorial, I’d recommend using the WPCode plugin.

I hope this helps!

Hi @rsouzaam ,

I followed your advice, installed WPCode (I used functions.php file before) and used the global code, not even targeting a specific form:

View post on imgur.com

Nothing on the front-end, still:

View post on imgur.com

By the way, I used another code snippet of yours to make the first checbox option select all of them at once – it worked like a charm. So the issue for me is only with this specific code snippet.

Hi @rsouzaam,

So, I figured out that the code is working, however the warning message is not shown with all the other “The field is required” notices. It’s shown only after all the other fields are passed, and only when the form is trying to finally send the message.

So, it works, yes. However, I don’t understand the reason for not showing this warning alongside other default notices? This is confusing and not user-friendly.

Hi @visedfaq,

Thanks for your feedback!

Our team worked on adjusting the code snippet based on your feedback. Here is the updated code snippet that should address your request:

/**
 * Validate checkbox field
 */
  
 function wpf_custom_checkbox_validation( ) {
	?>
	 
	<script type="text/javascript">
	 
	 jQuery(document).ready(function($) {
    	$('#wpforms-submit-58').click(function(event) {
        var checkedCount = $('#wpforms-58-field_1 input[type="checkbox"]:checked').length;
        if (checkedCount < 2) {
            //event.preventDefault();
            var errorHtml = '<em class="wpforms-error">Please select at least two choices.</em>';
            setTimeout(function() {
                if ($('.wpforms-error').length) {
                    // Error element is displayed, now you can perform further actions
					$('#wpforms-58-field_1-container').append(errorHtml);
          }
            }, 100); // Delay of 100 milliseconds
        }
    	});
		});
	 
		</script>
	 
	<?php
	}
	 
add_action( 'wpforms_wp_footer_end', 'wpf_custom_checkbox_validation', 30 );

Please replace ’58’ with your specific Form ID, and ‘1’ with your corresponding Field ID.

I hope this helps!

This works great, thank you very much! You should definitely update the referenced manual on your website with this new code.

Hi @visedfaq,

Great to hear that the code worked as you’d like it to!

I shared this topic with the team, and I believe our guide on how to set a minimum number of choices for a Checkbox?will be updated with this code snippet.

If you’d like more help with using WPForms Lite, please feel free to reach out.

Thanks!

Hello @rsouzaam ,

I’d like to let you know that your recent code example doesn’t work correctly if there are two same forms on one page, here’s an example – the form at the bottom scrolls to the top one and doesn’t update checkboxes for itself.

Hi @visedfaq,

Thanks for letting me know!

I was unable to reproduce the issue you reported: “the form at the bottom scrolls to the top.”

However, it seems the adjusted code snippet is not working. From the Page Source, it seems you’re using FlyingPress, and an optimization might be affecting the code snippet to work as expected.

I recommend trying the code snippets in our guide on how to set a minimum number of choices for a Checkbox. I understand this is not the ideal solution for you, but perhaps the original code snippet does not have the scroll issue and works as expected.

I apologize, as code customizations are outside our scope of support. If you’d like to explore custom development options to adjust the code snippet for your request, we highly recommend posting your customization job here.

But I really hope the original code snippet can work as expected and prevent the scroll issue.

Thanks!

Hi @rsouzaam ,

I’ve disabled FlyingPress and it didn’t change anything – the issue is still ongoing. This is how it looks:

View post on imgur.com

By the way, I found out that no custom code is affecting this – the problem is that we have two same forms on the one page. that’s it. Is your plugin not capable of running two same forms on one page?

Hi @visedfaq,

Thanks for the clarification!

First, I’d like to apologize for the confusion regarding my point about FlyingPress. I was suggesting that it might be affecting the custom code snippet related to the validation of the minimum number of choices for the checkbox field.

Regarding the scroll issue, it will not occur if you click in the input box, but only when clicking on the choice – screencast.

It looks like this is?a possible bug. A report has been created about this issue to notify our?development team about it.

I apologize for the inconvenience in the meantime, and I will reach out as soon as I have more details.

Thanks!

Hi @rsouzaam,

Thanks for the screencast and acknowledgment of the issue, I will be waiting for the future update that fixes this bug.

Hi @visedfaq,

You’re welcome! I hope this issue can be resolved soon.

In the meantime, you can prevent it with this CSS snippet:

div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input + label{
    pointer-events: none;
}

Or, if you want to restrict the CSS snippet to a specific form, you can use:

#wpforms-25553 .wpforms-field-checkbox ul li input + label{
    pointer-events: none;
}

Please replace “25553” with your form ID.

I hope this helps!

Hi @rsouzaam , thanks for the suggestion, but I think I’ll wait for a more proper solution, since I want users to be able to click on text and this checks the box to the left.

Hi @visedfaq,

I received some feedback regarding the issue you reported, and I’d like to share it with you.

The scroll that happens after clicking on the label of a choice in the second form, which takes you back to the same choice in the first form, is expected behavior.

The <label> element under the choice has a for attribute that matches the id of the <input> element. Because of this, when you click on the choice label, the input gets checked.

However, when you have the same form twice, the browser will check the first input element on the page that has the same id as the for attribute in the choice label. This is why the browser scrolls to the first form.

You can find more details about the for attribute in the guide here.

Here’s a screencast for your reference.

To address the issue, there are currently two options:

1) You can duplicate your form and place the different forms in separate positions on your page.

2) You can use the CSS snippet below to disable the option to click on the choice label.

div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input + label{
    pointer-events: none;
}

Alternatively, if you want to disable that option only on a specific page, you can use a CSS snippet like this:

.page-id-11484 .wpforms-field-checkbox ul li input + label{
    pointer-events: none;
}

However, I do agree the resource to use the same form with checkboxes fields would be super helpful. I’ve made a note of the feature request and we’ll keep it on our radar to be reviewed as we plan out our roadmap for the future.

Thanks!