CODEWITHSUNDEEP
javascriptjqueryvalidation
Ayman Hussein
Ayman Hussein

Reputation: 3857

Force user to fill phone textfield in certain format

I have textfield to let user to fill his phone number, but I need to force that user to fill it in certain format like this: (0599)-9-111222.

my code is:

function fomratPhone(phone){
     for(var i = 0; i < phone.length; i++){
         if (phone[0] == "(") continue;
         else return false; 

         if (phone[5] == ")") continue;
         else return false;   

         if (phone[6] == "-" || phone[8] == "-") continue;
         else return false; 
     }
     return true; 
}

but this code does not work.

Upvotes: 5

Views: 3423

Answers (6)

Chris Smith
Chris Smith

Reputation: 3012

You could use the Text Mask library. They have a nice demo here.

To force the text field into a phone number, you could so something like this (taken from here):

<script
  type="text/javascript"
  src="./node_modules/vanilla-text-mask/dist/vanillaTextMask.js"></script>
<script type="text/javascript">
  var phoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]

  // Assuming you have an input element in your HTML with the class .myInput
  var myInput = document.querySelector('.myInput')

  var maskedInputController = vanillaTextMask.maskInput({
    inputElement: myInput,
    mask: phoneMask
  })

  // Calling `vanillaTextMask.maskInput` adds event listeners to the input element. 
  // If you need to remove those event listeners, you can call
  maskedInputController.destroy()
</script>

They also have wrappers for Angular, React, and others.

Upvotes: 1

PeterM
PeterM

Reputation: 441

In case it's handy to someone else: Here is a way to make it format as you type. It's adapted from this post.

function phone(n){
    var x = n.replace(/\D/g, '').match(/(\d{0,4})(\d{0,1})(\d{0,6})/);
    return (!x[2] ? x[1] : '(' + x[1] + ')' + x[2] + (x[3] ? '-' + x[3] : ''));
}

Calling phone('39020343993') gives you "(3902)0-343993". Calling phone('3902034') gives you "(3902)0-34".

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

Another alternative is the jQuery inputmask plugin

<input type="text" name="phone" id="phone" />

<!-- include jQuery & inputmask plugin -->
<script type="text/javascript">
    $(function(){
        $("#phone").inputmask("mask", {"mask": "(9999)-9-999999"});
    });
</script>

This is just another variation of what NF supplied. I haven't used the one NF mentioned, but I have used this one with no problems. Also, because it's a github project, should you find errors or make corrections you can fork the project and create a pull request with any new additions.

Upvotes: 6

RobG
RobG

Reputation: 147453

Dunno why cfs delete his/her answer, it's fine. You can simply delete any non-numeric character, check that there are 11 digits, then reformat the digits to your required format, e.g.

var n = '1234 5 678901'
n = n.replace(/\D/g,'');

// do validation tests
if (n.length == 11) {

    // If passed tests, reformat as required
    console.log(n.replace(/(\d{4})(\d)(\d{6})/,'($1)-$2-$3')); // (1234)-5-678901
}

Upvotes: -1

N F
N F

Reputation: 31

You can use this jQuery masked input plugin

Upvotes: 2

Alex
Alex

Reputation: 10226

assuming that the entered numbers must be at the mentioned length each. Else just strip the {amount} pairs

function fomratPhone(phone){
     return phone.length == 15 && /^\((\d){4}\)-[\d]-(\d){6}$/g.test(phone);
}

Upvotes: 0

Related Questions