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?
Solved! Go to Solution.
thank you!
Sure, if you could mark as Correct please.
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.
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.
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>
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!)
Link to page: http://na-sj19.marketo.com/lp/049-ESW-305/WF-Ad-Center-Contact.html
Thanks
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).