Jump to content

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 post
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 post
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 post
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 post
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 post
Share on other sites
  • 1 year later...

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...
×
×
  • Create New...