Hey Webflow Community!
I have stumbled across a few posts on this topic but there doesn’t appear to be a solution around. Hopefully we can change that 
The goal: To only allow a form to submit IF and only IF at least one of three checkboxes is selected.
The progress: I have the validation somewhat working.
The issue: When I submit the form, the values pushed to the Webflow forms page are not the same values logged in the console during the click event of the form submission button.
Key notes :
Webflow does not appear to enable us to access or use checkboxName.checked to obtain a value or checkboxName.checked = true to set the value of the checkbox (same with setting it to false).
checkboxName.checked returns undefined when called initially. I have force-set it to false with the goal of being able to read the status of the checkboxes upon click.
My thinking is that I am not actually updating the property where Webflow stores the checked/unchecked status, but I was thinking it would be possible to at least sync them so the values displayed on the console logs are the same as the ones submitted.
Any thoughts or ideas would be greatly appreciated as I’ve been wracking my brain over this!
I have set all the checkboxes as per the image below:
Here’s the code (I’m quite new to custom code as you can probably tell!)
// Select body
const body = document.querySelector('.body');
let submitActive = false;
body.setAttribute('data-check-selected', submitActive);
// Select Invest Checkbox Elements
const investAttrKey = `invest`;
const investCheckBox = document.querySelector('#checkbox-invest');
const investCheckBoxToggle = investCheckBox.querySelector('#invest-check');
let investCheckBoxStatus = false;
investCheckBox.checked = investCheckBoxStatus;
// Select Grow Checkbox Elements
const growAttrKey = `grow`;
const growCheckBox = document.querySelector('#checkbox-grow');
const growCheckBoxToggle = growCheckBox.querySelector('#grow-check');
let growCheckBoxStatus = false;
growCheckBox.checked = growCheckBoxStatus;
// Select Purchase Checkbox Elements
const purchaseAttrKey = `purchase`;
const purchaseCheckBox = document.querySelector('#checkbox-purchase');
const purchaseCheckBoxToggle = purchaseCheckBox.querySelector('#purchase-check');
let purchaseCheckBoxStatus = false;
purchaseCheckBox.checked = purchaseCheckBoxStatus;
// Select Updates Checkbox Elements
const updateAttrKey = `update`;
const updateCheckBox = document.querySelector('#checkbox-update');
const updateCheckBoxToggle = updateCheckBox.querySelector('#update-check');
let updateCheckBoxStatus = true;
updateCheckBox.checked = updateCheckBoxStatus;
// Update checkbox status
investCheckBoxToggle.addEventListener('click', (e) => {
investCheckBoxStatus = !investCheckBoxStatus;
investCheckBox.checked = investCheckBoxStatus;
console.log('invest: ', investCheckBoxStatus, investCheckBox.checked );
});
growCheckBoxToggle.addEventListener('click', (e) => {
growCheckBoxStatus = !growCheckBoxStatus;
growCheckBox.checked = growCheckBoxStatus;
console.log('grow: ', growCheckBoxStatus, growCheckBox.checked);
});
purchaseCheckBoxToggle.addEventListener('click', (e) => {
purchaseCheckBoxStatus = !purchaseCheckBoxStatus;
purchaseCheckBox.checked = purchaseCheckBoxStatus;
console.log('purchase: ', purchaseCheckBoxStatus, purchaseCheckBox.checked);
});
const getInvolvedEmail = document.querySelector('#EMAIL-2');
let getInvolvedEmailValue = getInvolvedEmail.currentValue;
// Update email address based on change.
getInvolvedEmail.addEventListener('change', (event) => {
getInvolvedEmailValue = event.target.value;
console.log(getInvolvedEmailValue);
});
const updateBodyAttributes = function() {
if (investCheckBoxStatus == true || growCheckBoxStatus == true || purchaseCheckBoxStatus == true)
{
return body.setAttribute('data-check-selected', true);
} else {
return body.setAttribute('data-check-selected', false);
}
}
const validateForm = function() {
updateBodyAttributes();
console.log('invest: ', investCheckBoxStatus);
console.log('grow: ', growCheckBoxStatus);
console.log('purchase: ', purchaseCheckBoxStatus);
submitActive = body.getAttribute('data-check-selected');
if (submitActive == 'true')
{
console.log('success', submitActive);
}
else {
console.log('fail', submitActive);
alert('Please select Invest, Grow or Purchase before submitting the form');
}
}
// Select Form / Button Elements
const getInvolvedForm = document.querySelector('#wf-form-get-involved-form');
const registerInterestButton = document.querySelector('#register-interest-button');
// Send alert if no checkbox is selected
registerInterestButton.addEventListener('click', (e) => {
// e.preventDefault();
validateForm();
registerInterestButton.addEventListener('submit', (e) => {
// e.preventDefault();
});
});
Here is my site Read-Only: