Making check boxes "required"

[Josh123]

Hi Sanford,

I have a similar issue, but little bit different.

I need the at least one box checked mandatory from each section "Step 1, 2, and 3". I've read your article about "Checkboxes Min/Max Checked", but I have multiple groups, and at least one box needs to be checked from each group to submit the form.

However, the exception is if "Unsubscribe me from everything" check box is checked at the bottom, everything else gets unchecked, and the form has to be submit-able. Do you know how to rewrite the scrip to make both rules working?

[SanfordWhiteman]

Move the config section inside whenReady().

[Kelly_Sheetz]

Hi Sanford,

I am also looking to do something similar as the above two use cases.

As you can see on the form below, the first two workshop options are at the same time. I want to use javascript to either hide checkbox #2 if checkbox #1 is checked and vice versa OR throw an error message if a lead attempts to submit the form if they selected checkbox #1 and checkbox #2.

LP: AWS Executive Summit Workshops Las Vegas

Thanks in advance!

[SanfordWhiteman]

Use my same code above. Your config block would be like this:

var checkboxGroups = [{
  fieldNames: [].map.call(document.querySelectorAll('[name="eventDateCode"][value="cloud-migration"],[name="eventDateCode"][value="cloud-simulation"]'),function(el){ return el.id }),
  minChecked: 1,
  maxChecked: 1,
  minMessage: 'You must check at least one box in this group!'
}];

[Kelly_Sheetz]

Thanks, Sanford. This works great in CodePen: https://codepen.io/figureone/pen/8be8e1e6fc1e622f97c412c8933594c9

When I add the script to my landing page, the js doesn't seem to work: AWS Executive Summit Workshops Las Vegas /external-link.jspa?url=https%3A%2F%2Fpages.awscloud.com%2FAWS-reInvent-Exec-Summit-2017---Workshops...

Any thoughts on what I am doing wrong?

[Kelly_Sheetz]

Sorry, see this CodePen: https://codepen.io/ksheetz/pen/VMdOQE

[SanfordWhiteman]

Works for me on the LP and in the Pen.