Phone number formatting and e-mail validation

[deemuss]

I have found a good solution to format a phone number in JS Format Phone Number article, however this worked only for one field. Is there any way to apply this formatting for multiple fields?

Another question: in the search field I have an e-mail field and I need it to be verified before the Search button is pressed. Is it posible?

[George43]

You should add this code to the HTML block with Disabled HTML Editor just below search fields. Search field labels should contain Phone and Email parts of words. Example of the app provided below.

 

This soulition is perfectly fit for validating search fields on Search Report Data Page

 

<SCRIPT LANGUAGE="JavaScript">
    let validationForm = false;
    document.addEventListener('DataPageReady', function(event) {
        const searchInput= 'input[id^=Value]';
        document.querySelectorAll(searchInput).forEach(function (element, key, nodelist){
            const candidatePhone = "hone";
            const candidateEmail = 'mail';
            const searchLabelPath = nodelist[key].closest('tr').childNodes[0].childNodes[0].innerHTML;
            if(searchLabelPath.indexOf(candidatePhone)!=-1){
                        nodelist[key].maxLength = 14;
                        nodelist[key].placeholder='Type your Phone';
                        nodelist[key].onkeyup = function(keyUpEvent)
                        {
                            keyUpEvent = keyUpEvent || window.event;
                            const isCharacters=keyUpEvent.keyCode >= 65 && keyUpEvent.keyCode <= 90;
                            const isSpecial=keyUpEvent.keyCode >= 37 && keyUpEvent.keyCode <= 40;
                            if (isCharacters){
                                this.value = this.value.substr(0, this.value.length - 1);
                                return;    
                            }
                            const formattedValue = (this.value.replace(/[^\d]/g, ''));
                            switch(formattedValue.length){
                                case 7:
                                    this.value = (formattedValue.substring(0,3) + "-" + formattedValue.substring(3,7));
                                    break;
                                case 10:
                                    this.value = ("(" + formattedValue.substring(0,3) + ") " + formattedValue.substring(3,6) + "-" + formattedValue.substring(6,10));
                                    break;
                            }
                        }
            }

            if (searchLabelPath.indexOf(candidateEmail)!=-1){
                nodelist[key].maxLength = 25;
                nodelist[key].placeholder='Type your Email';
                document.addEventListener('BeforeFormSubmit', function(event) {
                    if(nodelist[key].value.indexOf('@')==-1){
                        event.preventDefault();
                        alert('Please check your Email adress.');
                     }
                });
            }
        })
       

    });
    

</SCRIPT>

 

phone_1_0_2019-Apr-12_0935.zip

[Kurumi]

Hi! Just an update on this, Caspio has a new Tech Tip called: Format Phone Number in DataPages. You may visit it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/format-phone-number-in-datapages/

Hope it helps!

[Kurumi]

Hi All - In relation to Caspio's new feature of Worldwide SMS Notifications, if you would like your input phone number fields to be automatically formatted - you can use the International Telephone Input plugin. This JavaScript plugin is used for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder, and provides formatting/validation methods. To know more of the customization, you can check this link: https://github.com/jackocnr/intl-tel-input

Here's a sample result in DataPage:

After submission in table:

Related articles:

https://howto.caspio.com/notifications/sms-notifications/configuring-the-sms-enabled-countries/
https://howto.caspio.com/release-notes/caspio-32-0/

Hope it helps!

[PotatoMato]

Just to add, Caspio has released a new howto article regarding this: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/enhancing-phone-number-fields-with-formatting-and-validation/

[futurist]

Just to add, if you also wish to validate value entered in an input field to make sure that it follows this format: www.websitename.com

Then you can use this code:

 

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function(event) {

var inputField = document.querySelector('#InsertRecordNameofField');

  const value = inputField.value;
  const regex = /^www\.[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/;

if (!regex.test(value)) {
event.preventDefault();
alert('Invalid Submission!');

} else {

document.form["caspioform"].submit();

}

});
</script>

Make sure to replace "NameofField" with the actual name of the field that you want to validate before submitting.