Form - multiple checkboxes, only one required

Design help General
1

Hi all!
I have a group of checkboxes. Is that possible to make required at least one checkbox in the group? So, I want to apply “required” setting to a group of checkboxes, but not a single checkbox. If users don’t select at least one checkbox in the group I want to show an error message.

Please advise.

2

Did you find an answer for this? I’m looking for exactly the same solution

3

This would require custom code. I personally use formvalidation.io and this validator when this is needed. It’s a paid library. You might find an alternative.

4

@webdev

I tried a solution, with a script like this:
https://html.form.guide/checkbox/multiple-checkbox-validation-in-javascript/

but it doesn’t worked - I’ll guess according to the error and success messages in webflow.

Do you have an example how you did it?

5

Hello everyone!

Working on a client project and I had the same requirement. I think I’ve found a solution with the code bellow

<script>
 $(function(){
    var requiredCheckboxes = $('.class-of-a-div-that-wraps-checkboxes :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});
</script>

Piter :webflow_heart:

6

Any tutorial or step by step instructions you care to share? Would be extremely helpful in completing the perfect product for a client of ours…

7

Yes, this seems to work in principle. When using this, you must make all checkboxes within the container Required. When at least one checkbox is clicked the script makes the others not required as far as I can see.

Shortcoming: When no box is checked Webflow’s default error will point to the first checkbox to say that that must be ticked, which is incorrect. So, the script would have to be expanded to address this. Or even better, Webflow include this kind of functionality out of the box.

8

The code doesn’t work in my project.
Here is the read-only link: Webflow - TRINKER-MEDIA-NEW
You have to click on contact to open the section with the radio buttons :slight_smile:

9

You can do this extremely easy using Formly for Webflow. Check out the “Checkboxes” section on this link: FormlyDocs | ϟ Formly - Multistep Form Solution for Webflow | ViDesigns

It’s also free!

10

Try this: FormlyDocs | ϟ Formly - Multistep Form Solution for Webflow | ViDesigns

Go to the checkboxes section.

11

Here is my solution to do the validation using javascript completely, hope this helps someone. You will need some coding experience to tweak this for your case… or chatGPT can help :stuck_out_tongue_winking_eye:

<script>
Webflow.push(function() {
  $('#wf-form-free-website-promo-form').submit(function(event) {
    var validationConfig = {
      'name-error': 'name',
      'email-error': 'email',
      'phone-error': 'phone',
      'contact-preferences-error': 'contact-prefereces-checkbox',
      'contact-days-error': 'contact-days-checkbox'
    };

    // Hide all errors
    $.each(validationConfig, function(errorId, className) {
      $('#' + errorId).hide();
    });

    var isValid = true;

    // Validate input fields and checkboxes
    $.each(validationConfig, function(errorId, className) {
      var elements = $('.' + className);

      if (className.includes('checkbox')) {
        var isChecked = false;
        elements.each(function() {
          if ($(this).is(':checked')) {
            isChecked = true;
            return false; // Exit loop if at least one checkbox is checked
          }
        });
        if (!isChecked) {
          $('#' + errorId).show();
          isValid = false;
        }
      } else {
        elements.each(function() {
          if (!$(this).val()) {
            $('#' + errorId).show();
            isValid = false;
          }
        });
      }
    });

    if (!isValid) {
      event.preventDefault(); // Prevent form submission
      return false;
    }
    
    return true;
  });
});
</script>