Jump to content
  • 0

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


roattw

Question

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!

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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

 

 

Link to comment
Share on other sites

  • 0

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>

 

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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") ;

Link to comment
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
Answer this question...

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