Jump to content

Display a warning message and stop form submission


Recommended Posts

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>
 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 1 month later...

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;

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

image.png.a6ecd91215e55e625dc8783735e867a7.png

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

image.png.5f282834fb1f843849c6000a4d0b4d3e.png

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

Link to comment
Share on other sites

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.

image.png.a6ecd91215e55e625dc8783735e867a7.png

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

image.png.5f282834fb1f843849c6000a4d0b4d3e.png

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

 

Link to comment
Share on other sites

  • 4 months later...

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

image.png.e5cf358eea992d6be629406cb5b9cdae.png

 

image.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...