Jump to content
Carlson

field validation on tabular inline edit field

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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 -->

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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/

 

image.png.625aef66035eeb270affc529f84981e7.png

 

 

 

==

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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...

×
×
  • Create New...