Validating Phone Number

[KAPITYAN]

Can you help me validating a phone number field?  That only contains 10 Numbers (US FORMAT) and it should not allow submitting a partial number or below the minimum length of 10 numbers.

[NailDyanC]

Hi @NJConrcs, 

Yes, you can do it in Caspio.   Just set the Character length( Maximum and minimum) of the field, please see the attached Screenshot for reference.

But if you want  the format just like this: (XXX)-XXX-XXXX, here is the Javascript code for that:

<SCRIPT LANGUAGE="JavaScript">

function f_a(v_id)

{

return document.getElementById(v_id);

}

f_a('InsertRecordSubmitPhoneNumber').maxLength = 14;

f_a('InsertRecordSubmitPhoneNumber').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>

 

Just add that JavaScript Code inside your Footer.

Note: Kindly change “InsertRecordSubmitPhoneNumber” to the name of your field. And make sure that you already have the Javascript code in your footer before setting up the Character length.

 Hope that helps.

 

Regards,

@NailDyanC

 

[DefinitelyNot31337]

Hello @NJConrcs,

 

Sure. It would require custom coding but it's easy to implement. Just do the following.

1.) Go to your DataPage Configuration > Configure Fields.

2.) Add a Header and Footer

3.) Select your Footer and disable HTML Editor in the Advanced Tab.

4.) Paste the code snippet below and replace cbParamVirtual1  to 'InsertRecord' and the name of your field in your DataSource.

E.g InsertRecordtelephone

<script>

var field = 'cbParamVirtual1';
/*Example:
var field = 'InsertRecordtelephone';
var field = 'InsertRecordphone';
var field = 'InsertRecordphonenumber';
*/


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.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();


if (input.value.length >= 14){
this.submit();
} else {
alert('Please input a valid phone number');
input.focus();

}

}

</script>

 

*Please note that this would not work on DataPages with AJAX Loading enabled, so might need to disable that. More information can be found here.

This solution is heavily inspired by this reply. I give full credit to them for the algorithm. I just made a few additions and adjustments.

 

Regards,

DN31337

Edited August 28, 2018 by DefinitelyNot31337
made it specific to put the code in the footer.

[KAPITYAN]

Thank you guys, that works for me.

But now, I am trying to use this script on a single record update (vs. a submission form).  Unfortunately, it is not working. Is this because on a single record update DataPage, I cannot receive value or parameter on load?

Is it possible for phone validation to work on a single record update form?

Thanks,

NJConrcs

• NJConrcs

[NailDyanC]

Hello@NJConrcs,

 

Yes, it is possible for phone validation to work on a single record update form. Just change the “InsertRecordSubmitPhoneNumber” to “EditRecordSubmitPhoneNumber”.

Here is the sample script to guide you:

 

<SCRIPT LANGUAGE="JavaScript">

function f_a(v_id)

{

return document.getElementById(v_id);

}

f_a('EditRecordSubmitPhoneNumber').maxLength = 14;

f_a('EditRecordSubmitPhoneNumber').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>

 

Note: Kindly change “EditRecordSubmitPhoneNumber” to the name of your field.

 

Regards,

@NailDyanC

 

[bpasko]

@DefinitelyNot31337 or anyone else, I am wondering if you can help me with a situation related to the above.

I used your script above, which worked beautifully when applied to one field.  I edited it slightly to be EditRecord because I am working with a details page.

My problem is that I have 11-12 phone fields inside my details page.  And when I duplicate the script 11-12 times, I run out of space in my footer.

I don't have enough coding experience to know how to merge or make the script apply to multiple fields.  If you could suggest a workaround I would be very grateful.

Thank you,

Brian

P.S>  Here is the script I am using, which works perfectly for individual fields:

 

<script>

var field = 'EditRecordPhone2';

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.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();

if (input.value.length >= 14){
this.submit();
} else {
alert('Please input a valid phone number');
input.focus();

}

}

</script>

[Lromero1]

I am currently looking at how to get the formatting in place on a search and report DataPage and I have messed around with the JS a bit with no results. Has anyone been able to get the formatting working for Search Data Pages?

[Kurumi]

Hi @Lromero1, are you referring to the Search Field? If yes this code will work:

You might need to change the Field to the correct element for Search Field just like this one:

<script>

var field = 'Value1_1'; // Field from your Search Report

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.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();


if (input.value.length >= 14){
this.submit();
} else {
alert('Please input a valid phone number');
input.focus();

}

}

</script>

Insert this code in the Footer of Search Report.

Take note that this will only work when the Search Form option is Show Search Form -> Results on a new page. 

See this link for Caspio Elements. 

[Kurumi]

On 9/10/2019 at 8:52 PM, bpasko said:

@DefinitelyNot31337 or anyone else, I am wondering if you can help me with a situation related to the above.

I used your script above, which worked beautifully when applied to one field.  I edited it slightly to be EditRecord because I am working with a details page.

My problem is that I have 11-12 phone fields inside my details page.  And when I duplicate the script 11-12 times, I run out of space in my footer.

I don't have enough coding experience to know how to merge or make the script apply to multiple fields.  If you could suggest a workaround I would be very grateful.

Thank you,

Brian

P.S>  Here is the script I am using, which works perfectly for individual fields:

 

<script>

var field = 'EditRecordPhone2';

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.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();

if (input.value.length >= 14){
this.submit();
} else {
alert('Please input a valid phone number');
input.focus();

}

}

</script>

Hi @bpasko - If you run out of space in the Footer, you can use App Parameter -> Type (Long Text) to insert the code. For more than one field, you may check this post as well:

 

[NailDyanC]

Hi, just to add in the previous comments above, this 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

[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]

Hi! Just to add, you may also check this article: https://howto.caspio.com/tech-tips-and-articles/enhancing-phone-number-fields-with-formatting-and-validation/

 

-Potato

[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):