Kevin Powell - Community•12mo ago

Code Help

Hey Guys, I need your help in following Javascript code. I want my input field to format values in this format. +92 ###-####-###

function phoneFormat(input) {
    input = input.replace(/\D/g,'') 
    var size = input.length;
    if (size > 0) {
        input = "+91 " + input;
    }
    
    if (size > 4) {
        input = input.slice(0, 6) + "-" + input.slice(6);
    }

    if (size > 9) {
        input = input.slice(0, 10) + "-" + input.slice(10);
    }

    console.log(input.length + " and size is " + size);
    return input;
}

But it is not working as expected. Anyone Who can help me with that

12 Replies

MarkBoots•12mo ago

if your input are 10 digits (ignoring the spaces or other chars), then you could just do

const onlyDigits = input.replace(/\D/g,"");
const formatted = onlyDigits.replace(/(\d{3})(\d{4})(\d{3})/g, '+91 $1-$2-$3')
console.log(formatted); //"+92 123-4567-890"

const onlyDigits = input.replace(/\D/g,"");
const formatted = onlyDigits.replace(/(\d{3})(\d{4})(\d{3})/g, '+91 $1-$2-$3')
console.log(formatted); //"+92 123-4567-890"

But, there will be a lot of edge cases. What if someone already puts in the country code, or if there are not 10 digits, or whatever (don't expect a user to allways have it right) there are some libraries that can help you with it

Prince KOP•12mo ago

Thanks for this code but i am writing code in VanillaJs so can not use library + What is the issue with my code.

MarkBoots•12mo ago

didnt run your code my self to check, but you are overriding the input with each if-statemenet. after the first if, the input has already +91 added. then in the next step you have to account for that

Prince KOP•12mo ago

Okay, Thanks buddy

MarkBoots•12mo ago

your output is "+91 12-345-67890" so there is a miscalculation with the slice index. Think you didn't account for the space after +91

Prince KOP•12mo ago

for size 3 also slice is not working, and one more issue after writing all the 10 numbers, value changes to +91-91-919-9191

MarkBoots•12mo ago

input.replace(/\D/g,'') 
    var size = input.length;
    if (size > 0) {
        input = "+91 " + input;
    }
    
    if (size > 3) {
        input = input.slice(0, 7) + "-" + input.slice(7);
    }

    if (size > 7) {
        input = input.slice(0, 12) + "-" + input.slice(12);
    }
  console.log(input); /* "+91 123-4567-890" */
  console.log(input.length + " and size is " + size); /* "16 and size is 10" /*

input.replace(/\D/g,'') 
    var size = input.length;
    if (size > 0) {
        input = "+91 " + input;
    }
    
    if (size > 3) {
        input = input.slice(0, 7) + "-" + input.slice(7);
    }

    if (size > 7) {
        input = input.slice(0, 12) + "-" + input.slice(12);
    }
  console.log(input); /* "+91 123-4567-890" */
  console.log(input.length + " and size is " + size); /* "16 and size is 10" /*

but i'm not sure why you would need the if statements

Prince KOP•12mo ago

for condition checking on every user input Here is html :

 <input type="phone" id="mobileNumber" class="editable-input rounded-3 form-control form-control-lg border hover:border-primary border-2" onInput="this.value = phoneFormat(this.value)" value="">

MarkBoots•12mo ago

ah okay i see, you want to check/format it live

Prince KOP•12mo ago

yup any solution till now

MarkBoots•12mo ago

ohw sorry, i was totally forgotten about it.

MarkBoots•12mo ago

I think this should do the trick https://codepen.io/MarkBoots/pen/xxMBKJW?editors=1111 but you also still have to account for other keystrokes, such as the delete and backspace

Mark Boots

CodePen

xxMBKJW

...

Gaming

Programming

Code Help