Display a warning message and stop form submission

[VA123]

I am using a submission form and trying to customize it. It's a simple script that displays a warning message and stops submission, if a user makes a certain combination of selections(i.e. selects ABC from a dropdown and XYZ is calculated in the Virtual field. However, the code does not seem to work. Could somebody take a look and let me know what I am doing wrong? The UseCaseType is a dropdown with a lookup table linked to it, and the Virtual Parameter is a Calculated Value SQL script(that does work). For some reason, a and b are populated as nulls.

<script>

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

var a = document.getElementById("InsertRecordUseCaseType").value;
var b = document.getElementById("cbParamVirtual2").value;

alert('a is ' + a + ' | b is ' + b);

  if (a == 'ABC' && b == 'XYZ') {
      alert('You cannot select ABC and XYZ together');
      event.preventDefault();
  }

});

</script>
 

[TsiBiRu]

Hi @VA123,

You can try to use my code below, I've created a Submission form with two text box. If you have inputted 'ABC' on the first text field and 'XYZ' on the second field it will throw an error message. Else the form will be submitted. This is the deployed URL so that you can see how it works.  https://c5eib829.caspio.com/dp/d90b6000106528eabab84e64b6ea

This is the code that I've formulated, I think you can use the code below, you will just need to change the ID of my text box, to the ID of your fields in your DataPage.  

<script>

document.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();
input1  ="ABC";
// Just replace the ID of your fields in document.getElementById("ID of your field").value;
  
var input1= document.getElementById("InsertRecordValue1").value;
var input2= document.getElementById("InsertRecordValue2").value;

if (input1  =="ABC" &&  input2  =="XYZ" ){
alert('You cannot have ABC in the first field, and XYZ in the second field');
} 


else {
this.submit();

}

}

</script>

I hope this helps.

Regards,

TsiBiRu

[VA123]

Sure, the above works if used verbatim. However, my 1st field as referenced above, "Value1", is a parent cascading field, and my 2nd field, as referenced above,"Value2",  is a virtual calculated field. What would be the best way to access them? Since the below does not mention calculated fields.

 

[Kurumi]

You may want to check this forum post for Calculated Value:
 

Quote

 

I hope this helps!

[DefinitelyNot31337]

Hi,

 

Just to add more information, Caspio usually appends some sort of unique identifier in elements especially if AJAX Loading is enabled or on Special elements.

 

Since Caspio introduced AJAX in their product, it has been my habit to always use a wildcard in referring to elements in JavaScript. The syntax is as follows:

document.querySelector('id*=FIELDNAME')

 

That way, elements that have an id of FIELDNAME_zs2312f will be selected.

Also note that non-input fields do not have the value property. We get their innerText instead. (this is applicable for Display Only and Calculated Fields)

 

In your case, just replace

This

var a = document.getElementById("InsertRecordUseCaseType").value;
var b = document.getElementById("cbParamVirtual2").value;

 

with this

var a = document.querySelector("[id*=InsertRecordUseCaseType]").value;
var b = document.querySelector("[id*=cbParamVirtual2]").innerText;

[bbeshlian]

Hello,

Is there a way this can be done without java scripting? The end users have an input form with multiple future installment payment dates on it. I'd like to have a message appear if the value in the installment payment date field < the value in the effective date field.

Thanks,

Bill

[kpcollier]

8 hours ago, bbeshlian said:

Hello,

Is there a way this can be done without java scripting? The end users have an input form with multiple future installment payment dates on it. I'd like to have a message appear if the value in the installment payment date field < the value in the effective date field.

Thanks,

Bill

I don't think anything like that is possible without javascript. Text manipulation, alerts, and validation handling is all handled with JS.

Is there a reason for not using JavaScript?

[TsiBiRu]

Hi @bbeshlian,

I was able to create validation without using JavaScript, what I did is the following:

1. I've created a virtual field and use the SQL statement below to compare the dates ( installment payment date (Date1) and effective date (Date2) ) to determine if it is valid or not.

2. I've hidden that virtual field using the method in this article

CASE
WHEN [@field:Date1] <  [@field:Date2]THEN 'Invalid'
ELSE 'Valid'

END

3. Then I've inserted an HTML block to display the error Message, and added it to section two.

4.  Then I've created a rule that will only display the Error message if the value in our virtual field is invalid

5. Then I was able to prevent the user in submitting the form using the solution on this forum post

 

I've also added the exported copy of the DataPage that I've worked with so that you can import it to your account and see how it works

I hope this help.

Regards,

TsiBiRu

 

CaspioData_2019-Mar-30_0553.zip

[bbeshlian]

On 3/30/2019 at 12:55 AM, TsiBiRu said:

Hi @TsiBiRu

This works! Thanks again! 

Bill 

 

Hi @bbeshlian,

I was able to create validation without using JavaScript, what I did is the following:

1. I've created a virtual field and use the SQL statement below to compare the dates ( installment payment date (Date1) and effective date (Date2) ) to determine if it is valid or not.

2. I've hidden that virtual field using the method in this article

CASE
WHEN [@field:Date1] <  [@field:Date2]THEN 'Invalid'
ELSE 'Valid'

END

3. Then I've inserted an HTML block to display the error Message, and added it to section two.

4.  Then I've created a rule that will only display the Error message if the value in our virtual field is invalid

5. Then I was able to prevent the user in submitting the form using the solution on this forum post

 

I've also added the exported copy of the DataPage that I've worked with so that you can import it to your account and see how it works

I hope this help.

Regards,

TsiBiRu

 

CaspioData_2019-Mar-30_0553.zip

 

[TsiBiRu]

Hi @bbeshlian,

I'm happy to know that I was able to help you with this one.

Regards,

TsiBiRu

[DefinitelyNot31337]

Hi Everyone,

 

In addition to this post:

 

Do note that you may opt to do the validation on DataPage level only. Just create a Virtual Field, set the Form Element of Calculated Value, paste the syntax, and set it as hidden field in the Advanced tab.

CASE WHEN

[@field:Date2] < [@field:Date1]
THEN CAST( 'a' + 1 as INT)

END

 

[Johnsp65]

Thanks. I've using Caspio for basic stuff (databases, workflow and email notification etc) for years. I've never actually messed with the submit code but I have some html and java experience (long time ago).. i'll play with this.

Basically, i want to force player to put in correct phrase in a text box.

If they get it right, they move on and I get notified by email or SMS or both.

if they don't, they stay on same page and have to keep trying..

i dont' want do multiple choice.

[Wikiwi]

 

@VA123 You can try using queryselector for Virtual fields instead of getElementById. If you inspect the element for a virtualfield, the value for the Id will have randon characters after 'cbParamVirtual' and that was the cause of your issue

 

<script>

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

var a = document.getElementById("InsertRecordUseCaseType").value;
var b = document.querySelector("span[id^='cbParamVirtual2']").innerHTML;

alert('a is ' + a + ' | b is ' + b);

  if (a == 'ABC' && b == 'XYZ') {
      alert('You cannot select ABC and XYZ together');
      event.preventDefault();
  }

});

</script>