Another Javascript Field Validation Question

[DaveS]

I'm trying to do a validation of a combination of fields (if a virtualParam 4 says that a deposit is required, you can't choose cash payment).  The choice of cash payment is an InsertRecord field that lives in a drop-down box.   Note - cbParamVirtual4 is a Select from a table that is bringing back a Yes/No field - I've already had some fun trying to figure out whether to treat that as 1/0 or Yes/no...  The answer was Y/N (not yes/no, just y/n).

I've seen several example scripts - both in the footer and in HTML blocks designed to validate fields on a page, but I can't seem to get any of them to validate my page.  I've tried this one and this one.  I also looked at this one but don't understand it.

Nothing I do seems to make the validation fail.  I've tried If (1=1) and even tried removing the If statement altogether, but the submission always goes through.  

My most current code looks like this - would greatly appreciate any suggestions.

 

<SCRIPT LANGUAGE="JavaScript">

function pmt()
{
var depreq = document.getElementById("cbParamVirtual4").value; 
var pmtplan = document.getElementById("InsertRecordPaymentMethod").value;
if (depreq!='Credit Card'){
alert("Please select Credit Card payment for this service");
return false;
}

}

document.getElementById("caspioform").onsubmit=pmt;
</SCRIPT>

[CoopperBackpack]

Hello @DaveS,

As far as I understood, you want to prevent form submission on some condition.

If so, please use Caspio EventListener called BeforeFormSubmit https://howto.caspio.com/datapages/ajax-loading/

You may refer to this post where I shared a solution that uses this EventListener https://forums.caspio.com/topic/22124-cascading-autocomplete-limit-answers/

 

So, the code example can be (I am not sure how you are going to use the both variables so I left one in the example):

<script>
  document.addEventListener('BeforeFormSubmit', function(event) {

   let pmtplan = document.getElementById("InsertRecordPaymentMethod").value;
    
    if (pmtplan!='Credit Card'){
     event.preventDefault();
     alert( 'Please select Credit Card payment for this service');
    }
    
  })
</script>

Instead of a standard alert, you may use the so-called SweetAlert for the pop-up. You may learn more via this link https://sweetalert2.github.io/

In this case, the code can be like this:

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  document.addEventListener('BeforeFormSubmit', function(event) {

   let pmtplan = document.getElementById("InsertRecordPaymentMethod").value;
    
    if (pmtplan!='Credit Card'){
     event.preventDefault();
     Swal.fire( 'Please select Credit Card payment for this service');
    }
    
  })
</script>

 

BTW, if you need the conditional dropdown that is based on the value returned in the Vurtual4, you may use a lookup table and cascading elements.

[DaveS]

@CoopperBackpack Thank you for this - I will review it.  In re-reading my original message, it is a little confusing - sorry about that. 

 

I have a field that specifies whether certain payment options are available for a given service (it should be a lookup table as you said - I tried to save myself a bit of time and wound up costing myself time).  In any case, my quick fix was this: 

There are only 2 different versions o the drop down, so I created each as a virtual field.

I set up rules to hide the Virtual Field that doesn't apply.

Then I set up a case statement to get the result into the field it needs to land in.  As you said - I should have just used a lookup table.  Call it technical debt!

 

Also - just a quick thank you - I've been using a lot of your content - just tonight I implemented this one - worked like a charm!

[DaveS]

And, in case anyone is coming back to this post down the road - I wound up backing up a little bit and implementing it the cleaner way - with a lookup table.