Make at least one checkbox "required" in multiple groups on Marketo form.

[Josh123]

Hi Everyone!

I have a Marketo form with multiple groups of check boxes, and I am wondering how to make at least one checkbox "required" from each group to submit the form. How would you guys approach this problem?

[SanfordWhiteman]

Please highlight the JS code using the syntax highlighter so it's readable.

From what I can read it's clear there's a lot of duplication (and you must not duplicate, since you're then adding multiple onValidate events).

checkboxGroups is an Array. It's already designed to have multiple items. There's no need for checkboxGroups2 and checkboxGroups3.

var checkboxGroups = [
{
  fieldNames: ["selectDeselectBrand", "Opt_in_Aston_Martin__c", "Opt_in_Audi__c", "Opt_in_BAC__c", "Opt_in_Bentley__c", "Opt_in_Bugatti__c", "Opt_in_Ferrari__c", "Opt_in_Lamborghini__c", "Opt_in_Lotus__c", "Opt_in_HROwen_Bodytechnics__c", "Opt_in_HROwen_Group__c", "Opt_in_HROwen_Insurance_Services__c", "Opt_in_HROwen_Specialist_Cars__c", "Opt_in_Maserati__c", "Puritalia__c_contact", "Rimac__c_contact", "Opt_in_Rolls_Royce__c", "Unsubscribed" ],
  minChecked: 1,
  maxChecked: Infinity,
  minMessage: “You must check at least one box in each group!”
},
{
  fieldNames: ["selectDeselectContent", "Opt_in_Accessories__c", "Opt_in_Events__c", "Opt_in_MOT_Reminders__c", "Opt_in_News__c", "Opt_in_Offers__c", "Opt_in_Parts__c", "Opt_in_Sales__c", "Opt_in_Service__c", "Opt_in_Service_Reminders__c", "Opt_in_Warranty_Reminders__c", "Unsubscribed" ],
  minChecked: 1,
  maxChecked: Infinity,
  minMessage: “You must check at least one box in each group!”
},
{
  fieldNames: ["selectDeselectChannels", "Opt_in_Email__c", "Opt_in_Mail__c", "Opt_in_Phone__c", "Opt_in_SMS__c", "Unsubscribed" ],
  minChecked: 1,
  maxChecked: Infinity,
  minMessage: "You must check at least one box in each group!"
}
];

[Josh123]

Thanks Sanford for your reply, I really appreciate it.

However, the form is still submit-able when one checkbox is selected from only one section. It shouldn't be submit-able until at least one check box is selected from other two section. Also, I need to add another rule that if "Unsubscribe me from everything" checkbox is selected at the bottom. The form has to be submit-able with everything else unchecked.

http://info.hrowen.co.uk/Preference-Centre-2019-LP.html

var checkboxGroups = [
{
  fieldNames: ["selectDeselectChannels", "Opt_in_Email__c", "Opt_in_Mail__c", "Opt_in_Phone__c", "Opt_in_SMS__c" ],
  minChecked: 1,
  maxChecked: Infinity,
  minMessage: "You must check at least one box in each group!"
},
{
  fieldNames: ["selectDeselectContent", "Opt_in_Accessories__c", "Opt_in_Events__c", "Opt_in_MOT_Reminders__c", "Opt_in_News__c", "Opt_in_Offers__c", "Opt_in_Parts__c", "Opt_in_Sales__c", "Opt_in_Service__c", "Opt_in_Service_Reminders__c", "Opt_in_Warranty_Reminders__c" ],
  minChecked: 1,
  maxChecked: Infinity,
  minMessage: "You must check at least one box in each group!"
},	
{
  fieldNames: ["selectDeselectBrand", "Opt_in_Aston_Martin__c", "Opt_in_Audi__c", "Opt_in_BAC__c", "Opt_in_Bentley__c", "Opt_in_Bugatti__c", "Opt_in_Ferrari__c", "Opt_in_Lamborghini__c", "Opt_in_Lotus__c", "Opt_in_HROwen_Bodytechnics__c", "Opt_in_HROwen_Group__c", "Opt_in_HROwen_Insurance_Services__c", "Opt_in_HROwen_Specialist_Cars__c", "Opt_in_Maserati__c", "Puritalia__c_contact", "Rimac__c_contact", "Opt_in_Rolls_Royce__c" ],
  minChecked: 1,
  maxChecked: Infinity,
  minMessage: "You must check at least one box in each group!"
}
];		

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

MktoForms2.whenReady(function(form) {
	var formEl = form.getFormElem()[0],
		arrayFrom = getSelection.call.bind([].slice);

	// in real-time, when the max checked is reached, disable remaining 'boxes in the group
	checkboxGroups.forEach(function(group) {
		var groupEls = formEl.querySelectorAll("#" + group.fieldNames.join(",#"));
		arrayFrom(groupEls).forEach(function(el) {
			el.addEventListener("click", function(e) {
				var numChecked = arrayFrom(groupEls).filter(function(itm) {
					return itm.checked;
				}).length;
				arrayFrom(groupEls).forEach(function(el) {
					el.disabled = numChecked == group.maxChecked && !el.checked;
				});
			});
		});
	});

	// check minimum during validation
	form.onValidate(function(nativeValid) {
		if (!nativeValid) return;

		checkboxGroups.forEach( function(group) {
			form.submittable(false);
			var groupEls = formEl.querySelectorAll("#" + group.fieldNames.join(",#")),
				numChecked = arrayFrom(groupEls).filter(function(itm) {
					return itm.checked;
				}).length;
			if (numChecked < group.minChecked) {
				form.showErrorMessage(
					group.minMessage,
					MktoForms2.$(groupEls[groupEls.length - 1])
				);
			} else {
				form.submittable(true);
			}
		});
	});
});