Formatting Phone Number in DataPages

2 minutes to read

In this article, we will guide you on how to format and validate the phone number in the format (XXX)-XXX-XXXX in a Submission Form DataPage and Tabular Report DataPage with Inline Insert option enabled.

Steps to validate and format phone number as (XXX)-XXX-XXXX in a Submission Form DataPage:

Edit your Submission Form DataPage and include the Phone Text field in the DataPage.
Add a Header and Footer in the Configure Fields screen.
Disable the HTML Editor in the Footer section.
Copy and paste the following code in the Footer section:
Replace the FIELDNAME in the JavaScript code with the actual phone field name (i.e., InsertRecordPhone).
Save the DataPage.

Steps to validate and format phone number as (XXX)-XXX-XXXX in a Tabular Report DataPage with Inline Insert option enabled:

Edit your Tabular Report DataPage and include the Phone Text field in the DataPage.
Make sure Inline Insert is selected in the Results Page Editing Options screen.
Add a Header and Footer in the Configure Results Page Fields screen.
Disable the HTML Editor in the Footer section.
Copy and paste the following code in the Footer section:

Note: The code is only applicable when the Responsive option is enabled.

Replace the FIELDNAME in the JavaScript code with the actual phone field name (i.e., InlineAddPhone).
Save the DataPage.

Note: You can apply the JavaScript in the update form by following the steps above and changing InsertRecord to EditRecord in the JavaScript code.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support, or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<script>

var field = 'InsertRecordFIELDNAME';

var input = document.querySelector('#' + field);
input.maxLength = 14;
input.onkeyup = telephize
input.onkeydown = telephize

function telephize(v_e) {
// this.value = this.value.replace( /\D+/g, "" ).replace( /([0-9]{1,3})([0-9]{3})([0-9]{4}$)/gi, "($1) $2-$3" ); //mask numbers (xxx) xxx-xxxx

   v_e = v_e || window.event;
    if (v_e.keyCode >= 65 && v_e.keyCode <= 90) {
     this.value = this.value.substr(0, this.value.length - 1);
     return false;
    } else if (v_e.keyCode >= 37 && v_e.keyCode <= 40) {
     return true;
    }
    var v_value = (this.value.replace(/[^\d]/g, ''));
    if (v_value.length == 7) {
     this.value = (v_value.substring(0, 3) + "-" + v_value.substring(3, 7));
    } else if (v_value.length == 10) {
     this.value = ("(" + v_value.substring(0, 3) + ") " + v_value.substring(3, 6) + "-" + v_value.substring(6, 10));
    };
   }

document.addEventListener('BeforeFormSubmit', function(e) {        
       if (input.value.length < 14) {

            e.preventDefault();
                       alert('Please input a valid phone number');                        
                       input.focus();
               } 
});
</script>

code2

<script type = "text/javascript" >
    // Add JQuery 

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery-3.4.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

// used this as a function so it will be reusable. 
// fieldID: element identifier that will be used. should be in string 

function addFormat(fieldID) {
    var field = fieldID;
    var input = document.querySelector(field);
    input.maxLength = 14;
    input.onkeyup = telephize;
    input.onkeydown = telephize;
}

function telephize(v_e) {
    // this.value = this.value.replace( /\D+/g, "" ).replace( /([0-9]{1,3})([0-9]{3})([0-9]{4}$)/gi, "($1) $2-$3" ); //mask numbers (xxx) xxx-xxxx 

    v_e = v_e || window.event;
    if (v_e.keyCode >= 65 && v_e.keyCode <= 90) {
        this.value = this.value.substr(0, this.value.length - 1);
        return false;
    } else if (v_e.keyCode >= 37 && v_e.keyCode <= 40) {
        return true;
    }
    var v_value = (this.value.replace(/[^\d]/g, ''));
    if (v_value.length == 7) {
        this.value = (v_value.substring(0, 3) + "-" + v_value.substring(3, 7));
    } else if (v_value.length == 10) {
        this.value = ("(" + v_value.substring(0, 3) + ") " + v_value.substring(3, 6) + "-" + v_value.substring(6, 10));
    };
}
document.addEventListener('BeforeFormSubmit', function(e) {         
       if (input.value.length < 14) { 
 
            e.preventDefault(); 
                        alert('Please input a valid phone number');  
                        input.focus(); 
               }  
});
// calls the function onload. It adds format to the inline add input field 
addFormat('#InlineAddFIELDNAME'); // Added setInterval onload since the element (Add button on mobile) still does not exist even on DataPageReady. 
var checkMobileAddButton = setInterval(checkMobileElements, 1000); // Checks first if the element exists before applying the click function to the button 
var buttonChecker = 0;

function checkMobileElements() {
    var mobileButtonExist = $('.cbInlineAddFormButton').length;
    buttonChecker += 1000;
    if (mobileButtonExist > 0) {
        clearInterval(checkMobileAddButton); // upon click of button, checks if the input exists, then adds the format to the field. 
        $('input.cbInlineAddFormButton').click(function() {
            var inputChecker = 0;
            var checkMobileInput = setInterval(function() {
                var mobileInputExist = $('#InlineAddFormLightBox #InlineAddFIELDNAME').length;
                inputChecker += 1000;
                if (mobileInputExist > 0) {
                    clearInterval(checkMobileInput);
                    addFormat('#InlineAddFormLightBox #InlineAddFIELDNAME');
                } // stops the setInterval in a certain time if element cannot be found 
                else if (inputChecker >= 20000) {
                    clearInterval(checkMobileInput);
                }
            }, 1000);
        }); // stops the setInterval in a certain time if element cannot be found 
    } else if (buttonChecker >= 20000) {
        clearInterval(checkMobileAddButton);
    }
} 
</script>