Auto format a phone number field javascript

[mcates]

I would like to be able to have my employees enter in a phone number but always format it once they click off on the field to (xxx)xxx-xxxx. In addition I have multlple fields like phone, fax and cell. So I would like to be able to apply . I cannot seem to figure out how to do this. Could someone please help me?

I know that it an be done with javascript but caspio does not provide much support or scripts of java that i can figure out how to moify the one i have that will do it.

REQUEST TO CASPIO: I think it would be helpful to all users of your product if you could provide more example scripts for customization. Or even a subsection dedicated to javascripts...

[davep]

Unfortunately I'm not a JS expert to answer your question, but there is a collection of JS solutions at http://www.caspio.com/support/jssolution.asp. Perhaps you can find some pointers there.

By the way, JS solutions page is linked from the Resources page.

Dave

Caspio

[Isabelleg]

I would like to be able to have my employees enter in a phone number but always format it once they click off on the field to (xxx)xxx-xxxx. In addition I have multlple fields like phone, fax and cell. So I would like to be able to apply . I cannot seem to figure out how to do this. Could someone please help me?

I know that it an be done with javascript but caspio does not provide much support or scripts of java that i can figure out how to moify the one i have that will do it. 

REQUEST TO CASPIO: I think it would be helpful to all users of your product if you could provide more example scripts for customization. Or even a subsection dedicated to javascripts...

 

 

Hi Mike,

heres a js to validate a north america phone number format, enjoy !

PS: this code will work if the end-user enter a 10 digits number

- you have a field nammed "TEL"

- you can add a button in your form to check if the function works : add a html block and paste:

 

<input type="button" value="Click me!" onclick="tel();" />

 

(once you verified your code, you can hide your button with adding before the button <table style="display:none;"><td> and after the button </td></table> or you can delete it, because the code will be applied once the end-user will click "submit"

- then on your footer paste :

<SCRIPT LANGUAGE="JavaScript">

function tel()
{
var message = document.getElementById("InsertRecordTEL").value; // here you get what the end-user typed

document.getElementById("InsertRecordTEL").value = (message.replace(/[^\d]/g, '')); // then you strip off all the spaces

var message1 = document.getElementById("InsertRecordTEL").value;
document.getElementById("InsertRecordTEL").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));

}

document.getElementById("caspioform").onsubmit=tel;
</SCRIPT>

[lutzomater]

This code worked well for formatting the phone number me. Is there anyway to modify it so when the field is blank it stays blank? On blank fields I get the () -

[MayMusic]

You can try to add a if statement to check and see if it is blank. For instance:
 
 

<SCRIPT LANGUAGE="JavaScript">

function tel()
{

var message = document.getElementById("InsertRecordTEL").value; // here you get what the end-user typed
if (message != "") {
document.getElementById("InsertRecordTEL").value = (message.replace(/[^\d]/g, '')); // then you strip off all the spaces

var message1 = document.getElementById("InsertRecordTEL").value;
document.getElementById("InsertRecordTEL").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));
}
}

document.getElementById("caspioform").onsubmit=tel;
</SCRIPT>

[nuimage]

Hello MayMusic,

I implemented this code to validate a single phone field and it works perfectly!  Is there a way to modify this code to validate multiple phone fields?  

thanks in advance!

 

[DefinitelyNot31337]

Hi,

 

I modified MayMusic's JavaScript code. Please see below.

 

The USAGE of this would be, copy paste this snippet in the footer of your DataPage. Then add/modify the addField lines as needed.

<script type="text/javascript">
  var fields = [];
  function addField(id) {
    var field = document.getElementById(id);
    field.maxLength = 10;
    fields.push(field);
  }

  function telephize(ev) { 
    fields.forEach( function(elem) {
      var message = elem.value;
      message = (message.replace(/[^\d]/g, ''));
      message = ("(" + message.substring(0,3) + ") " + message.substring(3,6) + "-" + message.substring(6,10));
      
      elem.maxLength = 14;
      elem.value = message;

    });
  }
  document.querySelector("form[action*='[@cbAppKey]']").onsubmit = telephize;
  document.addEventListener("BeforeFormSubmit", telephize);

  addField('cbParamVirtual1');
  addField('InsertRecordYOURFIELD');
  addField('cbParamVirtual3');
  
</script>

 

Hope this helps.

 

Regards,

DN31337

[Hastur]

Hello!
You also may use iMask framework to implement any kinds of masks.
Here you can find information related to iMask - https://imask.js.org/

Example:
Let's implement the mask: 000-000-0000

To do that you need to follow these steps:

1. Add the "iMask.js" file as APP parameter with the File type.

2. Add the following snippet of code into the header of your datapage:

<script src="[@app:iMask/]"></script>

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 var phoneMask = IMask(
  document.getElementById('ID_OF_YOUR_INPUT'), {
    mask: '000-000-0000'
  });
});
</script>

You should use the ID value of your input instead of "ID_OF_YOUR_INPUT".

Please find the iMask.js file attached - iMask.js

[Elderberg]

Hey Andrew, thanks for this, i'm trying to get this implemented.  Can you clarify a few things as i'm not yet successful after following the above the best i could.

1. Does all of the script code go in the header? or does part of it go in the footer?

2. Is it that once the user starts typing numbers into a text field it should automatically be formatted for them visually as they type? or is this something that actions off on submission? 

 

[Elderberg]

Ok, so i got it to work.  so for the benefit of others:

1. All the code can remain in the header.

2.  Formatting using the mask happens in real time as the user types

3. Just a tip as to why it wasn't initially working for me:

when using a virtual field, say Virtual7  you need to use:

document.getElementById('cbParamVirtual7')  and NOT  document.getElementById('Virtual7') 

 

[wimtracking2]

Hi @Andrew

I implemented your iMask framework to format my phone number fields and it worked great. I deployed my datapage into a wordpress site without a hitch. However, when deployed into a Weebly website, it did not work. Other custom javascript is working in the same datapage on the Weebly site. Curious if you have run into this before, know what would cause the issue and if you have suggestions on what I might try to get it to work? Below is the code I implemented and it works when deployed on a wordpress site.

<script src="[@app:iMask/]"></script>

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 var phoneMask = IMask(
  document.getElementById('EditRecordFax'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordOffice_Phone'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordOther_Phones'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordPrimary_Phone_Number'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordCell_Phone'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordHome_Phone'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordBeeper'), {mask: '(000) 000-0000'});
var phoneMask = IMask(
  document.getElementById('EditRecordOther_Phone'), {mask: '(000) 000-0000'});
});
</script>

 

I answered my problem - it was a browser update issue. Oi

Edited December 6, 2019 by wimtracking2
Problem Solved

[senicholas]

I added the following to my footer, but nothing happened:

 

<SCRIPT LANGUAGE="JavaScript">

function tel()
{
var message = document.getElementById("InsertRecordTEL").value; // here you get what the end-user typed

document.getElementById("InsertRecordTEL").value = (message.replace(/[^\d]/g, '')); // then you strip off all the spaces

var message1 = document.getElementById("InsertRecordTEL").value;
document.getElementById("InsertRecordTEL").value = ("(" + message1.substring(0,3) + ") " + message1.substring(3,6) + "-" + message1.substring(6,10));

}

document.getElementById("caspioform").onsubmit=tel;
</SCRIPT>

What am I missing. Field name is "TEL"

[SinJunYoung]

If you are having issues on the codes and you want an as-is instructions that works well, try these: 

 

[AtayBalunbalunan]

Can you check if there is an error in the browser's console, senicholas? https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/

[senicholas]

I added the following script and it works great!

<SCRIPT LANGUAGE="JavaScript">
function f_a(v_id)
{
return document.getElementById(v_id);
}
f_a('InsertRecordTEL').maxLength = 14;
f_a('InsertRecordTEL').onkeyup = function(v_e)
{
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));
};
}
</SCRIPT>

[JayDub]

Hi - I'm trying to use the iMask framework and my DataPage is being hosted inside a WordPress page. The loading of the JavaScript library is failing with this message in the Chrome Console:

Uncaught SyntaxError: Cannot use import statement outside a module and it references the appParameter holding the imask.js file.

Anyone have thoughts on what may be causing that? Thanks in advance.

[sandy159]

Hello @JayDub,

I followed the solution above from this post and it worked perfectly for me in WordPress.

Could you please double-check that the names of the parameters are correct?

You may also find this article helpful: Troubleshooting Deployment in WordPress

Regards

[JayDub]

Hi @sandy159 I finally got iMask to work. Not sure what the issue was. I re-did all of the steps and this time it worked. I do have a different question, though. And I'm wondering if anyone else has noticed this? The iMask solution works to ensure the user is entering numeric characters, and it adds the "-" automatically between the area code, prefix and last four numbers - all good. However, from what I've found in testing it, it does still allow invalid phone numbers to be submitted because there is no check on whether the user has entered enough characters to make the phone number valid. I tried using the Character Length Min setting on the phone number in the DataPage and set it to 10, however, that still allows a phone number like this: 123-456-78 to be submitted, because it counts the hyphens as characters. Is there a way to modify the mask so that it also will not allow submission of a phone number that is not 10 (numeric) characters long?

[NailDyanC]

Hi, just to add in the previous comments above, phone formatting is also possible using calculated fields, calculated values or even in Formula fields.  You may use this formula:

CASE WHEN
[@field:Phone_Number] != ' '
THEN
'(' + SUBSTRING([@field:Phone_Number], 1, 3) + ') ' + ' ' + SUBSTRING([@field:Phone_Number], 4, 3) + '-' + SUBSTRING([@field:Phone_Number], 7, 4)
ELSE
[@field:Phone_Number]
END

[PotatoMato]

Just to update this post. Caspio has already created a How-to article for this. You may check this link: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/format-phone-number-in-datapages/

 

-Potato

[Kurumi]

You may also check this post for multiple fields of phone number: 

 

[futurist]

 Hi, you might also want to check this Forum post if you want to enforce the formatting for your phone fields but not make it a require field (allow empty values):