Phone numbers format while enter into text field

Phone numbers format while enter into text field

  

Team,

I have requirement where I should enter only the below format for phone number in the text filed.

ex: XXX-XXX-XXXX

Can any one help me how to achieve this ?

This requirement for web application

Thanks,

Sattibabu Vatti

Hi Sattibabu,

Just Apply the below mentioned javascript to get the above phone format. Call these two functions in the onBlur and onKeyPress events. I have also attached the screenshot showing, how to call these functions with their respective arguments.


SyntaxEditor Code Snippet

function ValidatePhoneNumber(phoneNumber,type,evt) {            
    debugger;
    var phno = document.getElementById(phoneNumber).value;
    var charcount = 0; 
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 && charCode != 08) {
        return false;
    }
    if (phno.length < 12) { 
           if(type=="fax")
             {
                 $("#ValidationMessage_"+phoneNumber).html("Please enter valid 10 Digit Fax Number").show();
                 $("#"+phoneNumber).addClass('Not_Valid');
             }
           else
             {
                 $("#ValidationMessage_"+phoneNumber).html("Please enter valid 10 Digit Phone Number").show();
                 $("#"+phoneNumber).addClass('Not_Valid');
             }
    }
    if(phno.length==12 || phno.length==0)
    $("#ValidationMessage_"+phoneNumber).hide();
} 

function GetPhoneFormat(evt,id) {
     debugger;
      evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;  
    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 && charCode != 08) 
    {
        return false;
    }
var str = document.getElementById(id).value;
if (str.length == 3) {
var ind = str.substring(0, 3);
document.getElementById(id).value = ind+'-';
return true;
}
if (str.length == 7) {
var ind = str.substring(0, 8);
document.getElementById(id).value = ind+'-';
return true;
}
if (str.length == 11) {
var ind = str.substring(0, 12);
document.getElementById(id).value = ind;
return true;
}
}



Where "inputPhone.Id" is the Id of the input box accepting the phone number.

After applying this javascript, your phone number will look like->



Pravi Gupta wrote:

Hi Sattibabu,

Just Apply the below mentioned javascript to get the above phone format. Call these two functions in the onBlur and onKeyPress events. I have also attached the screenshot showing, how to call these functions with their respective arguments.


SyntaxEditor Code Snippet

function ValidatePhoneNumber(phoneNumber,type,evt) {            
    debugger;
    var phno = document.getElementById(phoneNumber).value;
    var charcount = 0; 
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 && charCode != 08) {
        return false;
    }
    if (phno.length < 12) { 
           if(type=="fax")
             {
                 $("#ValidationMessage_"+phoneNumber).html("Please enter valid 10 Digit Fax Number").show();
                 $("#"+phoneNumber).addClass('Not_Valid');
             }
           else
             {
                 $("#ValidationMessage_"+phoneNumber).html("Please enter valid 10 Digit Phone Number").show();
                 $("#"+phoneNumber).addClass('Not_Valid');
             }
    }
    if(phno.length==12 || phno.length==0)
    $("#ValidationMessage_"+phoneNumber).hide();
} 

function GetPhoneFormat(evt,id) {
     debugger;
      evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;  
    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 && charCode != 08) 
    {
        return false;
    }
var str = document.getElementById(id).value;
if (str.length == 3) {
var ind = str.substring(0, 3);
document.getElementById(id).value = ind+'-';
return true;
}
if (str.length == 7) {
var ind = str.substring(0, 8);
document.getElementById(id).value = ind+'-';
return true;
}
if (str.length == 11) {
var ind = str.substring(0, 12);
document.getElementById(id).value = ind;
return true;
}
}



Where "inputPhone.Id" is the Id of the input box accepting the phone number.

After applying this javascript, your phone number will look like->




Hi Pravi,

Thanks for the reply.. I looks bit confuseing to me.

If possible can you please send the screen shot how you used in the onblur and onkeypress


Thanks,

Sattibabu


Sattibabu Vatti wrote:

Pravi Gupta wrote:

Hi Sattibabu,

Just Apply the below mentioned javascript to get the above phone format. Call these two functions in the onBlur and onKeyPress events. I have also attached the screenshot showing, how to call these functions with their respective arguments.


SyntaxEditor Code Snippet

function ValidatePhoneNumber(phoneNumber,type,evt) {            
    debugger;
    var phno = document.getElementById(phoneNumber).value;
    var charcount = 0; 
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 && charCode != 08) {
        return false;
    }
    if (phno.length < 12) { 
           if(type=="fax")
             {
                 $("#ValidationMessage_"+phoneNumber).html("Please enter valid 10 Digit Fax Number").show();
                 $("#"+phoneNumber).addClass('Not_Valid');
             }
           else
             {
                 $("#ValidationMessage_"+phoneNumber).html("Please enter valid 10 Digit Phone Number").show();
                 $("#"+phoneNumber).addClass('Not_Valid');
             }
    }
    if(phno.length==12 || phno.length==0)
    $("#ValidationMessage_"+phoneNumber).hide();
} 

function GetPhoneFormat(evt,id) {
     debugger;
      evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;  
    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46 && charCode != 08) 
    {
        return false;
    }
var str = document.getElementById(id).value;
if (str.length == 3) {
var ind = str.substring(0, 3);
document.getElementById(id).value = ind+'-';
return true;
}
if (str.length == 7) {
var ind = str.substring(0, 8);
document.getElementById(id).value = ind+'-';
return true;
}
if (str.length == 11) {
var ind = str.substring(0, 12);
document.getElementById(id).value = ind;
return true;
}
}



Where "inputPhone.Id" is the Id of the input box accepting the phone number.

After applying this javascript, your phone number will look like->




Hi Pravi,

Thanks for the reply.. I looks bit confuseing to me.

If possible can you please send the screen shot how you used in the onblur and onkeypress


Thanks,

Sattibabu



Hi Sattibabu,

I have already attached the screenshots, showing how to apply the javascript on the onBlur and onKeyPress events.