Jump to content

Validating Phone Number


Recommended Posts

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

 

oo.jpg

Link to comment
Share on other sites

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 by DefinitelyNot31337
made it specific to put the code in the footer.
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • 1 year later...

@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>

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

  • 4 months later...

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.

image.png

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

image.png

See this link for Caspio Elements. 

Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

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

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
Reply to this topic...

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

×
×
  • Create New...