Javascript string validation. How to write a character only once in string and only in the start?

Question

I am writing validation for phone numbers. I need to allow users to write + character only in the begining of input field and prevent users from writing it later in the field.

In other words:

+11111111 - right,

111111111 - right,

+111+111+ - false,

1111+111+ - false

The problem is that I need to perform validation while typing. As result I cannot analyse whole string after submision, thus it is not possible to fetch the position of + character because 'keyup' always returns 0.

I have tryed many approaches, this is one of them:

  $('#signup-form').find('input[name="phone"]').on('keyup', function(e) {
        // prevent from typing letters
        $(this).val($(this).val().replace(/[^\d.+]/g, ''));

        var textVal = $(this).val();

        // check if + character occurs
        if(textVal === '+'){
          // remove + from occurring twice
          // check if + character is not the first
          if(textVal.indexOf('+') > 0){
             var newValRem = textVal.replace(/\+/, '');
             $(this).val(newValRem);
          }

        }
});

When I am trying to replace + character with empty string then it is replaced only once which is not enough, because user might type it a cople of times by mistake.

Here is the link to the fiddle: https://jsfiddle.net/johannesMt/rghLowxq/6/

Please give me any hint in this situation. Thanks!

Try `$(this).val($(this).val().replace(/[^\d.+]|(.)\++/g, '$1'));` — Wiktor Stribiżew, Mar 17 '16 at 10:41
@WiktorStribiżew your answer is working, you could post it below and I will accept it. — johannesMatevosyan, Mar 17 '16 at 10:54

score 2 · Accepted Answer · edited May 23 '17 at 11:59

To help you with the current code fix (@Thomas Mauduit-Blin is right that there are a lot more to do here than just allow plus symbol at the beginning only), you may remove any plus symbols that are preceded with any character. Just capture that character and restore with a backreference in the replacement pattern:

$(this).val($(this).val().replace(/[^\d.+]|(.)\++/g, '$1'));

See the updated fiddle and the regex demo.

The pattern is updated with a (.)\++ alternative. (.) captures any character but a newline into Group 1 that is followed with one or more plus symbols, and the contents of Group 1 is placed back during the replacement with the help of $1 backreference.

thanks a lot, here is updated code, I removed all unneeded parts: https://jsfiddle.net/johannesMt/rghLowxq/16/ — johannesMatevosyan, Mar 17 '16 at 11:13

gurvinder372 · Answer 2 · 2016-03-17T10:59:28.877

1

If your textVal has a +, indexOf will only check for the first occurence. You need to ensure that first character is not checked by indexOf. So use substring to take out first character from the equation.

Simply replace

if(textVal.indexOf('+') > 0){

with

if(textVal.substring(1).indexOf('+') > -1){

Demo

edited Mar 17 '16 at 10:59

answered Mar 17 '16 at 10:39

gurvinder372

66,980
10
72
94

thanks for the answer, but it's not working, here is updated fiddle: https://jsfiddle.net/johannesMt/rghLowxq/7/ – johannesMatevosyan Mar 17 '16 at 10:42
@johannesMatevosyan In your fiddle, you are not using jquery – gurvinder372 Mar 17 '16 at 10:47
but I checked it and it shows console messages, it prevents from typing letters in the field, which means jquery is working. – johannesMatevosyan Mar 17 '16 at 10:51
@johannesMatevosyan there were other issues with your code as well https://jsfiddle.net/gurvinder372/rghLowxq/13/ try this code – gurvinder372 Mar 17 '16 at 10:54
Thanks again for your help, but it works right when string contains `+` at the begining (for example: `+111111`) otherewise there are issues (for example `1111111+`), it adds digits. – johannesMatevosyan Mar 17 '16 at 10:57
@johannesMatevosyan glad to help, please don't forget to upvote and accept the best answer that has helped you. – gurvinder372 Mar 17 '16 at 11:03

score 1 · Answer 3 · edited May 23 '17 at 12:15

1

If you want to do the validation on your own, you must use a regex.

But, as described in another related thread here:

don't use a regular expression to validate complex real-world data like phone numbers or URLs. Use a specialized library.

You must let the user enter an invalid phone number, and perform the check later, or on form submit and/or on server side for example. Here, you want to take care of the "+" character, but there are lot's of other stuff to do to have a trustable validation.

edited May 23 '17 at 12:15

Community

1
1

answered Mar 17 '16 at 10:45

Tmb

450
12
20

Thanks for the answer but I don't want to overload my project with many libraries. – johannesMatevosyan Mar 17 '16 at 10:49
@johannesMatevosyan Here, you want to take care of the "+" character, but there are lot's of other stuff to do to have a trustable validation. – Tmb Mar 17 '16 at 10:50

score 1 · Answer 4 · answered Mar 17 '16 at 10:47

1

For better validation Why don't you use Jquery maskedinput library which will do lots of additional task for you without over head for other purpose also

$("#phone").mask("+999-999-9999");
$("#phone").mask("+9999-999-9999");
$("#phone").mask("+99999999999");

answered Mar 17 '16 at 10:47

anomepani

1,796
2
25
34

Thanks for the answer but I don't want to overload my project with many libraries. – johannesMatevosyan Mar 17 '16 at 10:52

Javascript string validation. How to write a character only once in string and only in the start?

4 Answers4