Prevent form submission

[vinebath]

Hi everyone,

I have several checkbox fields on my submission datapage. The form can be submitted when none of them are checked as of now, but I need to change that.

Does anyone know how I can prevent the form submition if none of the checkboxes are checked?
 

thank you.

[Alison]

Hi @vinebath,

You need additional JavaScipt code to hide the button when none of the checkboxes are checked.

On the "Web Form Wizard - Configure Fields"  screen of the Submission form create a Footer element. Uncheck "Enable HTML editor" on the Advanced tab of the Footer,  switch to the Standard tab and put the following  code there:
 

<script>
document.addEventListener("DataPageReady", function() {
    let btnSubmitContainer = document.getElementsByClassName("cbSubmitButtonContainer")[0];
    btnSubmitContainer.classList.add("is-disabled");

    let ErrMes = document.getElementById("ErrorMessage");
    ErrMes.classList.remove("is-disabled");

    let chboxArr = [
        document.getElementById('cbParamVirtual1'),
        document.getElementById('cbParamVirtual2'),
        document.getElementById('cbParamVirtual3'),
        document.getElementById('cbParamVirtual4')
    ];


    for (let el of chboxArr) el.onchange = changeEventHandler;

    function changeEventHandler(event) {
        if (chboxArr[0].checked || chboxArr[1].checked || chboxArr[2].checked || chboxArr[3].checked) {
            btnSubmitContainer.classList.remove("is-disabled");
            ErrMes.classList.add("is-disabled");
        } else {
            btnSubmitContainer.classList.add("is-disabled");
            ErrMes.classList.remove("is-disabled");
        }
    }
});
</script>

<style> 
   .is-disabled{
      display:none !important;
}
</style>

The  "cbParamVirtual1" is the id of the checkbox element. It should be replaced with the id of the element on your datapage.

Also, you need to create an HTML block, click on the Source button and put the following code there:  

<div id="ErrorMessage"><span style="color:#FF0000;">Error. At least one checkbox needs to be checked.</span></div> 

 This is a code for the error message and its container. The error message and its styling can be changed.

 

[DefinitelyNot31337]

Hello,

 

While Alison's answer will hide the submit button when none of the checkboxes are checked, I believe the form can still be submitted if the user presses "Enter" on clicks "Submit" on their virtual keyboard (e.g. mobile).

 

If you want to refer to all checkboxes, paste this code snippet in your Footer (Disable HTML Editor from the advanced tab).

<script>

document.addEventListener('BeforeFormSubmit', function() {

  var allowSubmit = 0

  var fields = document.querySelectorAll(`[action*="[@cbAppkey]"] input[type=checkbox]`);

  for(var idx in fields) {
    if (fields[idx].checked == true) {
      allowSubmit = 1;
      break;
    }
  }

  if (!allowSubmit) {
    event.preventDefault();
    alert("Check at least one checkbox!");
  }

})


</script>

 

 

Else, if you want to define which checkboxes needed to be checked, use this one. 

<script>

document.addEventListener('BeforeFormSubmit', function() {

  var allowSubmit = 0

  var fields = ["InsertRecordField1", "cbParamVirtual1", "cbParamVirtual2"];

  fields = fields.map( function(elem) {
    return document.querySelector(`[action*="[@cbAppkey]"] [id*=${elem}]`);
  })

  for(var field of fields) {
    if (field.checked == true) {
      allowSubmit = 1;
      break;
    }
  }

  if (!allowSubmit) {
    event.preventDefault();
    alert("Check at least one checkbox!");
  }

})


</script>

 

Hope this helps.

 

-DN31337

[vinebath]

thank you guys!!! it helped a lot. 

[IamNatoyThatLovesYou]

Hello, just want to add more information that may help, you can check this HowTo link for reference regarding your question. https://howto.caspio.com/datapages/ajax-loading/

[RuisiHansamu]

Hello there! I wanted to share this updated or recent forum post that you can check regarding your questions: 

This explains how you can achieve this via Rules or JS.