Telephone number format script - acting like Required field on submit if not phone number

[roattw]

Have then script running to format any entered phone numbers to the desired format.  One side effect is that when forfm is submitted with no phone number entered at all (which is ok) it states the scripted language "Please input a valid phone number".

The phone number field is not set as Required field, so script must be requiring the data.  Can this be edited to allow an empty field, and only format if data entered?

This is the script used from another Caspio forum post:

<script>

var field = 'InsertRecordCell';

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) { 
       e.preventDefault(); 
       if (input.value.length >= 14) { 
            document.forms["caspioform"].submit(); 
        } else { 
            alert('Please input a valid phone number'); 
            input.focus(); 
        } 
});

</script>

Thank you!

[Woolf]

The script above did not work for me. It allowed the fields to be blank. But it did not format the numbers when I entered them into the field.  I added a unequal to NULL statement and it seems to be working for me now. I can leave the field blank. But if I don't and input numbers it will format them to the USA phone format.

<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 != Null  &&  input.value.length < 14) {

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

 

 

Quote

 

 

[futurist]

Hi @roattw,

I modified the code, could you give this a try:

 

<script>

var field = 'InsertRecordCell';

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) { 
       e.preventDefault(); 
       if (input.value.length >= 14 || input.value.length == 0) { 
            document.forms["caspioform"].submit(); 
        } else { 
            alert('Please input a valid phone number'); 
            input.focus(); 
        } 
});

</script>

 

[roattw]

Thank you!  This worked perfectly.

[NailDyanC]

Just want to add to this post, you may also consider checking this forum post: 

 

[roattw]

New spin to this if anyone is willing.  This works well UNLESS you start to type a phone number and make a typo.  Then it wont let you go back say to correct the area code numbers.  Will only let you edit outside the area code.

[roattw]

Thanks for this info.  Will test!  For mine I have three fields to apply this to: Cell, Office phone, Pager.  Would the array var below work to replace your single field version:

var field = 'InsertRecordFIELDNAME';
var input = document.querySelector('#' + field);

Array version:

var o_els = new Array("InsertRecordCell","InsertRecordOffice_Phone","InsertRecordPager") ;

[NailDyanC]

Hello, just want to add, Caspio has an article about Phone number formatting: https://howto.caspio.com/tech-tips-and-articles/enhancing-phone-number-fields-with-formatting-and-validation/