You are viewing limited content. For full access, please sign in.

Question

Question

how do i make only some of the choices in a checkbox list required

asked on December 14, 2020

I have this on a form but I only need the first 3 choices required to be check by the user. How can I make just the first 3 choices in my checkbox option required?

0 0

Replies

replied on February 9, 2021

The easiest way to do this is to just do separate fields for each checkbox, making the first three required and the last two optional.

If you absolutely want the checkboxes to be the same field, and require the first three to be checked, here's a way to do it.  This is a kludge, and won't show the end user the typical warning message about the missing fields, but it will prevent it from being submitted without them being completed.

Steps to test:

  1. Add a checkbox field to your form.
    1. Give it a variable name of: test_checkbox_requirements.
    2. Do not mark it as required on the Layout page (it doesn't hurt to do this, but it'll only require one checkbox, not all three).
    3. Set the five field labels, with values of choice1, choice2, choice3, choice4, and choice5.
    4. Give it a CSS Class name of: checkboxRequiredTest
  2. Add a single line field to your form.
    1. Mark the field as required.
    2. Set the formula to be: =test_checkbox_requirements.choice1
    3. Set the regular expression for the field to be: TRUE
    4. Set the CSS Class name to be: validateRequirements
  3. Add two more single line fields to your form - same settings as the prior one except for the formula referring to choice2 and choice3 instead of choice1.
  4. Add this CSS to your form (will hide the three single line fields):
    .validateRequirements {display: none!important;}
    
  5. Add this Javascript to your form (will add required astrisk symbols to the checkbox values):
    $(document).ready(function () {
      $('.checkboxRequiredTest input[value="choice1"]').parent().find('label').first().append('<span class="cf-required">*</span>');
      $('.checkboxRequiredTest input[value="choice2"]').parent().find('label').first().append('<span class="cf-required">*</span>');
      $('.checkboxRequiredTest input[value="choice3"]').parent().find('label').first().append('<span class="cf-required">*</span>');
    });
    
  6. You should be able to test the form, and it won't submit unless the first three checkboxes are marked.

 

This works because the three hidden single line fields populate as either TRUE or FALSE based on the three checkbox values - but only TRUE is an acceptable value to complete the form.  The downside is that the warning message about the incomplete values is attached to the hidden fields, so the form won't submit, but you don't see the red coloring and warning messages as part of the checkboxes.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.