field validation on tabular inline edit field

[ChrisCarlson]

Hello,

I am using the following script on a details page for form validation, but I would like to modify it to use for edit fields in a tabular inline edit. I noticed that the id is unique in tabular inline view and was wondering if anyone knows how to modify this to work or has an existing script that works.

<script>
function numericValueValidation1()
{
    var cash=document.getElementById("EditRecorddeposit_cash").value;
        if(isNaN(cash))
    {
        alert("You have entered an invalid value in the Enter Cash Deposit field. Value must be numeric. Do not include letters or symbols.");
        document.getElementById("EditRecorddeposit_cash").value="";
        document.getElementById("EditRecorddeposit_cash").focus();
    }
        else if((cash) < 0)
    {
        alert("You have entered an invalid value in the Enter Cash Deposit field. Value cannot be a negative amount.");
        document.getElementById("EditRecorddeposit_cash").value="";
        document.getElementById("EditRecorddeposit_cash").focus();
    }
}
document.getElementById("EditRecorddeposit_cash").onchange = numericValueValidation1;

</script>

[George43]

In order achieve this functionality you could use this code.

<script>
var nameOfField = "InlineEditEmail";
document.addEventListener('DOMSubtreeModified', function(){
  
        if(document.getElementsByName(nameOfField)[0]){
          
            document.getElementsByName(nameOfField)[0].addEventListener('change', function(){

                var cash= document.getElementsByName(nameOfField)[0].value;
                    if(isNaN(cash))
                {
                    alert("You have entered an invalid value in the Enter Cash Deposit field. Value must be numeric. Do not include letters or symbols.");
                    document.getElementsByName(nameOfField)[0].value="";
                    document.getElementsByName(nameOfField)[0].focus();
                }
                    else if((cash) < 0)
                {
                    alert("You have entered an invalid value in the Enter Cash Deposit field. Value cannot be a negative amount.");
                    document.getElementsByName(nameOfField)[0].value="";
                    document.getElementsByName(nameOfField)[0].focus();
                }
            });
        }
});
          
</script>

<!-- Ps this field is named as it called in your case, to find out it you should open inspect tool -->

 

[ChrisCarlson]

George43,

Thanks, that works great!

[mdupras]

Hello —

I have a similar need and attempted (and failed) to modify this code for my purposes. Hoping someone here can help!

We have a school closings list on our news website, which has 2 different Caspio forms for doing updates.

One is for the schools themselves, and the users can only access a single record. The update form is simple — the user can change the "Status" of the school (Open, Closed, Early dismissal, 2-hour delay, etc.), plus there's a text field for additional notes. A school doesn't display on the listing if the status is "Open," so to prevent a school from inputting notes that no one will see, this JavaScript prevents the user from adding notes if the status is "Open." It also empties the "Notes" field is the status changes to "Open":

<script type="text/javascript">

document.getElementById("EditRecordschool_close_notes").onclick = function (){

if(document.getElementById("EditRecordschool_close_status").value == "Open")
{
document.getElementById("EditRecordschool_close_notes").blur();
alert("To input notes, please select a different status.");
} else {
document.getElementById("EditRecordschool_close_notes").focus();
}
};

document.getElementById("EditRecordschool_close_status").onchange = function (){
  
if(document.getElementById("EditRecordschool_close_status").value == "Open")
{
document.getElementById("EditRecordschool_close_notes").value = "";
document.getElementById("EditRecordschool_close_notes").blur();
} else {
document.getElementById("EditRecordschool_close_status").focus();
}
};    
</script>

The other form is for in-house use, and the user is able to edit all records. The fastest way on deadline is to use "Grid Edit." I want to add this same functionality to that form — to only allow notes when the status is not "Open," and to empty the notes when the status changes to "Open." As I said, I attempted to modify the code George43 provided in a few different ways, but no luck.

Any help is greatly appreciated. Thank you!

— Mike

[DefinitelyNot31337]

Hi @mdupras,

 

I think you may be able to do this without JavaScript. You can define "Rules" which disables/hides your Notes field if Status is "Open"

You may refer to the documentation of rules in this link: https://howto.caspio.com/datapages/forms/conditional-forms/

 

 

 

 

==

In addition, you might want to persist the value of notes for when the status of the School changes. You may just set the field to be blank if the Status is: "Open" via Calculated Fields/Values. The syntax for either is as follows:

CASE 

  WHEN [@field:Status] = "Open"
  	THEN [@field:Notes]

  ELSE
	"No notes. Or you may set this to None. Or you may even remove the ELSE block"

END

[LINK] Documentation for functions

 

I hope this information helps.

 

Cheers!

-DN31337

[mdupras]

Thanks, DN31337! I did try that early on, but that feature doesn't seem to be available in grid-edit mode, only details page and single record.

[ChrisCarlson]

George43

I am using this script below on a details page (in the header) to check if numeric value entered exceeds 2 decimal places. How would I translate this script to work in the validation script you provided above? It work on the details page but not tabular inline edit.

<script>
$( function() {
    $('#EditRecorddeposit_checks').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
        alert("You have entered an invalid value in the Enter Checks Deposit field. Value cannot contain more than 2 decimal places.");
                this.value = "";
            }  
         }            
         return this; //for chaining
    });
});
</script>

[George43]

9 hours ago, Carlson said:

George43

I am using this script below on a details page (in the header) to check if numeric value entered exceeds 2 decimal places. How would I translate this script to work in the validation script you provided above? It work on the details page but not tabular inline edit.

<script>
$( function() {
    $('#EditRecorddeposit_checks').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
        alert("You have entered an invalid value in the Enter Checks Deposit field. Value cannot contain more than 2 decimal places.");
                this.value = "";
            }  
         }            
         return this; //for chaining
    });
});
</script>

You want to use your logic of the code above  in my implementation on  inline edit Data Page?Am i right? What are your fields names? Could inspect them throw developer tools?

 

 

First make sure that jquery is working propertly. Then you should embed your code in this event.

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
       	
              //do something
	
});
</script>

If it does not help i will make custom code on your requirements.

[ChrisCarlson]

George43,

Thanks, I was able to get it to work following those steps.