Can I interrupt a submission when 2 fields have the same data?

[HowDoYouWannaDoThis]

I have a submission form that have 2 date inputs and I would like to cancel a submission if these 2 inputs are the same date. This will prevent having "bad data" on my tables, not just an error message that a user can ignore and click submit anyway.

[Wikiwi]

You can create a simple formula inside a virtual field that will check if both dates are the same with something like this:

case when [@field:Date1] = [@field:Date2]
then 'ERROR'
else 'GOOD'
end

You can hide this virtual field when testing is done. Next, you need to add a Header and Footer and add the following JavaSrcipt code at the Header:

<script type="text/javascript">

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

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

if (Input1 === 'ERROR') {
event.preventDefault();
alert('Your Dates have the same value');
} 

});
</script>

Make sure to disable HTML editor and replace cbParamVirtual1 with the respective virtualfield name ex. If you're using Virtual3 for this formula then it should be cbParamVirtual3.

You can also edit the alert to display any message you want. The "event.preventDefault();" will prevent submission of the current input.

 

 

 

[KG360]

A million thanks Wikiwi - this is a fabulous solution, I have been looking for a solution to block submission on bad input./G

[KG360]

A question to you @Wikiwi: Would you have the same script for a details page, I have exactly the same use case when user makes changes

I have this formula in a Virtual field (virtual6):

CASE WHEN [@cbParamVirtual5] = 1 THEN 'GOOD' ELSE 'ERROR' END

And this script you provided, that works fine in Forms, but not in my Report Details page:

<script type="text/javascript">

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

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

if (Input1 === 'ERROR') {
event.preventDefault();
alert('Message to user');
} 

});
</script>

[KG360]

It seems to be working in preview mode, but not on the page where it is deployed ...

[Wikiwi]

On 2/14/2022 at 7:51 AM, Gunnar360c said:

A question to you @Wikiwi: Would you have the same script for a details page, I have exactly the same use case when user makes changes

I have this formula in a Virtual field (virtual6):

CASE WHEN [@cbParamVirtual5] = 1 THEN 'GOOD' ELSE 'ERROR' END

And this script you provided, that works fine in Forms, but not in my Report Details page:

<script type="text/javascript">

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

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

if (Input1 === 'ERROR') {
event.preventDefault();
alert('Message to user');
} 

});
</script>

I tried the script (my configuration and yours) on a Details Page and it should worked just fine. If you're having issues with it, maybe you should put the script in the footer and not the header. But I tried both configurations on my end and I haven't encountered any errors.

[KG360]

Ok perfect, thanks - then it should work for me as well . I thought perhaps that the 'BeforeFormSubmit' should be altered for it to work properly on a details page. I will circle back with my findings.

Thanks again!!

[KG360]

2 hours ago, Wikiwi said:

I tried the script (my configuration and yours) on a Details Page and it should worked just fine. If you're having issues with it, maybe you should put the script in the footer and not the header. But I tried both configurations on my end and I haven't encountered any errors.

Thanks @Wikiwi, I tested again and here is what's going on: The Report and Details page is on the same web page as a Submission From with that exact same script, so I tried two things:

1. Deployed the Report on another web page – it works perfectly fine
2. Changed the script a bit referencing different fields and values - The same issue remains, the Form works fine but not the Report details page

I suppose they might interfere with one another, and I might have to place the Form and the Report on different web pages, although quite nice to have them side by side.  

Additional ideas welcome,

G

[KG360]

I would like to add one remark to the topic of blocking submission of a form upon undesirable input data.

On 2/15/2022 at 5:53 PM, Wikiwi said:

I tried the script (my configuration and yours) on a Details Page and it should work just fine. If you're having issues with it, maybe you should put the script in the footer and not the header. But I tried both configurations on my end and I haven't encountered any errors.

I struggled to get this script working in several cases. The mistake I made was upper- and lowercase errors. The formula presented by @Wikiwiworks fine if one implements it precisely as presented. I stated *Error' instead of 'ERROR' because I did not know that the script was case sensitive.

Hate for others to waste the same amount of time as I did, until I had Alex from Caspio Support analyze the script and come to the conclusion I had the wrong upper/lower case combination. Thank you @Wikiwi for the formula and Caspio Support for setting me on the right course here. The script is essential to make a better user experience and accuracy of input data!

G

[Javier]

Hi,

I have the code for @wikiwi, but when I hide the virtual field the script doesn't execute, any idea? 

thanks

[Kurumi]

Hi @Javier - you can use the value of the input tag of Virtual Field by getting the value via ID in JS instead of using the field. For example: