SOLVED

Re: Making check boxes "required"

Go to solution
Anonymous
Not applicable

Making check boxes "required"

Hi Everyone! 

I'm setting up a newsletter sign up page, where we're hoping to use multiple single check boxes to indicate a subscription to the corresponding newsletter.  These boxes map to custom fields in salesforce that are also check boxes. 

The problem we keep running into is making the check boxes "required".  We don't want to allow people to submit the form without having at least one of these boxes checked, but if we select "required" in forms 2.0, you have to check off the boxes.  I'm guessing that this might be solved with some kind of script in an html box on the landing page?   I've suggested going with a select box to make things easy, but the web team is pretty firm on making these check boxes. How would you guys approach this problem?

form.png

Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Making check boxes "required"

26 REPLIES 26
SanfordWhiteman
Level 10 - Community Moderator

Re: Making check boxes "required"

Anonymous
Not applicable

Re: Making check boxes "required"

thank you! 

SanfordWhiteman
Level 10 - Community Moderator

Re: Making check boxes "required"

Sure, if you could mark as Correct ​please.

Anonymous
Not applicable

Re: Making check boxes "required"

Hi Sanford -

I have a similar situation where I a using multiple checkboxes within a field set. I need to have the field set/checkboxes "required" where the individual can only select ONE checkbox in the field set. Would this same code work or is more coding required since it is in a fieldset? Any help would be greatly appreciated.

pastedImage_0.png

SanfordWhiteman
Level 10 - Community Moderator

Re: Making check boxes "required"

Yes, it'll work if your fields are already in a fieldset. The code creates a "virtual" checkbox group that can include a set of independent checkboxes from anywhere on the form.

Anonymous
Not applicable

Re: Making check boxes "required"

Thank you. I pasted the code into my template but the 'required checkboxes' isn't working. Would you be able to tell what is wrong with my code below? Any help would be greatly appreciated.

<!DOCTYPE html>

<html><head>

  <meta charset="utf-8">

    <title>Contact Us</title>

  </head>

  <body>

   <script src="//app-sj19.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1001"></form>

<script>MktoForms2.loadForm("//app-sj19.marketo.com", "049-ESW-305", 1001);

    // ---- config section - site-specific setup here ----

  // array of checkbox groups, each group defined by an array of fields

  // maxChecked is (obvs.) the max # of elements that can be checked at once

  var checkboxGroups = [{

  fieldNames: ['specialtyinterestaddictions', 'specialtyinterestadministrationmanagementleadership', 'specialtyinterestanesthesiology', 'specialtyinterestaudiology', 'specialtyinterestbroadbased', 'specialtyinterestcardiologycardiaccare', 'specialtyinterestcommunitycare', 'specialtyinterestcriticalcare', 'specialtyinterestdentistry', 'specialtyinterestdermatology', 'specialtyinteresteducation', 'specialtyinterestemergencymedicine', 'specialtyinterestendocrinology', 'specialtyinterestgastroenterologyhepatology', 'specialtyinterestgerontology', 'specialtyinterestinfectiousdiseases', 'specialtyinterestinfusion', 'specialtyinterestinternalmedicine', 'specialtyinterestlifesciencesresearch', 'specialtyinterestmaternalneonatalperinatal', 'specialtyinterestneurologyneuroscience', 'specialtyinterestnutrition', 'specialtyinterestobstetricsgynecologywomenshealth', 'specialtyinterestoccupationalmedicine', 'specialtyinterestoncologyhematology', 'specialtyinterestophthalmologyoptometry', 'specialtyinterestorthopedics', 'specialtyinterestotolaryngology', 'specialtyinterestpainmanagement', 'specialtyinterestpathology', 'specialtyinterestpediatrics', 'specialtyinterestpharmacology', 'specialtyinterestphysicaltherapyrehabilitation', 'specialtyinterestplasticsurgery', 'specialtyinterestpsychiatricmentalhealth', 'specialtyinterestpulmonology', 'specialtyinterestradiology', 'specialtyinterestrheumatology', 'specialtyinterestsportsmedicinefitnessathletics', 'specialtyinterestsurgery', 'specialtyinteresttranslationalcare', 'specialtyinteresttransplantation', 'specialtyinteresttrauma', 'specialtyinterestwoundandostomycare'],

  minChecked: 1,

  maxChecked: 1,

  minMessage: 'You must check at least one box in this group!'

  }];

// --- no need to edit anything below this line! --

  MktoForms2.whenReady(function(form) {

  var formEl = form.getFormElem()[0],

  _forEach = Array.prototype.forEach,

  _filter = Array.prototype.filter;

  // in real-time, when the max checked is reached, disable remaining 'boxes in the group

  _forEach.call(checkboxGroups, function(group) {

  var groupEls = formEl.querySelectorAll('#' + group.fieldNames.join(',#'));

  _forEach.call(groupEls, function(el) {

  el.addEventListener('click', function(e) {

  var numChecked = _filter.call(groupEls, function(itm) {

  if (itm.checked) return true;

  }).length;

  _forEach.call(groupEls, function(el) {

  el.disabled = (numChecked == group.maxChecked && !el.checked);

  });

  });

  });

  });

  // check minimum during validation

  form.onValidate(function(nativeValid) {

  if (!nativeValid) return;

  _forEach.call(checkboxGroups, function(group) {

  form.submittable(false);

  var groupEls = formEl.querySelectorAll('#' + group.fieldNames.join(',#')),

  numChecked = _filter.call(groupEls, function(itm) {

  if (itm.checked) return true;

  }).length;

  if (numChecked < group.minChecked) {

  form.showErrorMessage(group.minMessage, MktoForms2.$(groupEls[groupEls.length - 1]))

  } else {

  form.submittable(true);

  }

  });

  });

  });

</script>

    </body>

</html>

SanfordWhiteman
Level 10 - Community Moderator

Re: Making check boxes "required"

Please link to a page where your code is running.

(Also pls use syntax highlighting when posting code here -- it's nearly impossible to read code that's in Arial + all packed together!)

Anonymous
Not applicable

Re: Making check boxes "required"

SanfordWhiteman
Level 10 - Community Moderator

Re: Making check boxes "required"

OK, the problem is your list of fields doesn't correspond to their actual IDs on your form.  The actual IDs are like mktoCheckbox_2308_43.

Rather than have to record the IDs, I would do it via this selector:

  var checkboxGroups = [{

    fieldNames: [].map.call(document.querySelectorAll('[name^="specialty"]'),function(el){ return el.id }),

    minChecked: 1,

    maxChecked: 1,

    minMessage: 'You must check at least one box in this group!'

  }];

Note your message "...at least one box" is at odds with the maxChecked, which currently allows a minimum and maximum of 1 (that is, exactly 1).