Java Script Prevent Submission

[Ras2019]

Hi,

I've been fiddeling with preventing a submissionform to submit and I have seen a few solutions in the forum. However it seems i cant get those to work, perhaps because i try to rewrite them a bit to fit my purpose.

This is what I am trying to achieve:

• I have two calculated virtual fields. These display the text WARNING if other fields exceed some values. (This works)
• If the two Virtual Fields display the warnings I want the form to prevent submission and high-light with alert the existing warnings.

Below script prevent submission completely regardless if there are warnings in the virtual fields or not... and there are no alert either.:

 

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {
event.preventDefault();

var Input1 = document.getElementByName('cbParamVirtual1').value;
var Input2 = document.getElementByName('cbParamVirtual2').value;
     if (Input1 === 'WARNING' || Input2 === 'WARNING') {
alert('Enter acceptable volume!');

} else {

document.forms["caspioform"].submit();

}

});
</script>

 

I would appreciate if anyone could point me in the right direction, getting the script to work.

Thanks a lot in advance.

Sincerely

Ras

 

[Vitalikssssss]

Hi @Ras2019,

The way you trying to refer to Virtual fields is incorrect. 

I would recommend using query selectors with contains type of match.

This code should work fine:

<script type="text/javascript">

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

var Input1 = document.querySelector("span[id^='cbParamVirtual1']").innerHTML;

var Input2 = document.querySelector("span[id^='cbParamVirtual2']").innerHTML;

     if (Input1 === 'WARNING' || Input2 === 'WARNING') {
event.preventDefault();

alert('Enter acceptable volume!');


} else {

document.forms["caspioform"].submit();

}

});
</script>

Regards,

vitalikssssss

[Ras2019]

Hi Vitalissssss,

Thanks again for great help... This worked immediately!

Very much appreciated.

Sincerely

Ras

 

 

[carlJS]

Hello,

 

You may also want to check on this thread

It shows how to prevent form submissions using Caspio Standard Features. With regards to showing an error message, you may show/hide and HTML Block using rules.

 

Hope this helps.

[src="carl.js"]

[IamNatoyThatLovesYou]

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

[autonumber]

Hi - Just to add, this code also works:

<script type="text/javascript">

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

var Input1 = document.querySelector("input[id^='cbParamVirtual1']").value;

if (Input1 == '') {
event.preventDefault();
alert('Invalid Submission!');

} else {

document.form["caspioform"].submit();

}

});
</script>

[ianGPT]

Hi, 

Just want to share. You can also use this code if you want to display the error message inside HTML block tags instead of an alert.
 

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {
  var Input1 = document.querySelector("input[id^='cbParamVirtual1']").value;
  var errorMessageElement = document.getElementById('error-message'); // Replace 'error-message' with the actual ID of your <p> block
  
  if (Input1 == '') {
    event.preventDefault();
    errorMessageElement.innerHTML = 'Invalid Submission!';
  } else {
    // Clear the error message if it was previously displayed
    errorMessageElement.innerHTML = '';
    document.form["caspioform"].submit();
  }
});
</script>