Formatting Phone Number in DataPages

Formatting Phone Number in DataPages2 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>