Using regex to restrict input in textbox

Question

/^+{0,1}(?:\d\s?){11,13}$/ this regex allows + at first place only and numbers only...

on keypress I want user should only be able to type + at first and digits that what above regex validates But code always goes to if part..why regex not working in this scenario

function ValidatePhone(phone) {
            var expr = /^\+?(?:\d\s?){11,13}$/;
            return expr.test(phone);
        }


var countofPlus = 0;

    $("#phone").on("keypress", function (evt) {
        if (evt.key == "+")
        {
            countofPlus = countofPlus + 1;
            if (countofPlus > 1 || this.value.length >= 1) {
                return false;
            }
            else return true;
        }
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && charCode != 43 && charCode != 32 && charCode != 40 && charCode != 41 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    });
$("#phone").on("keyup", function (evt) {
        debugger;
        if (evt.key == "+") {
            countofPlus--;
            return true;
        }

    });

It probably doesn't work because a user can't type the required minimum of 11 characters with one key press... — le_m, Jun 07 '17 at 16:24
This is a really bizarre and non- user friendly implementation. **Don't use the `keypress` function**. You could, for example, display a *warning* on the text box if the number is an unexpected format, when focus leaves the page element. (And validate again in the back-end.) — Tom Lord, Jun 07 '17 at 16:27
@le_m I am trying to use this solution but gives critical error in for let of loop — HDev007, Jun 07 '17 at 17:18
@HDev007 Are you developing for old browsers, IE? replace with `for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; ... }`. Also replace `event => { ... }` with `function(event) { ... }`. And replace `let` with `var`. — le_m, Jun 07 '17 at 17:21

score 2 · Accepted Answer · answered Jun 07 '17 at 17:50

Adapting an answer from HTML input that takes only numbers and the + symbol to your use-case yields the following (IE-)compatible code:

// Apply filter to all inputs with data-filter:
var inputs = document.querySelectorAll('input[data-filter]');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  var state = {
    value: input.value,
    start: input.selectionStart,
    end: input.selectionEnd,
    pattern: RegExp('^' + input.dataset.filter + '$')
  };
  
  input.addEventListener('input', function(event) {
    if (state.pattern.test(input.value)) {
      state.value = input.value;
    } else {
      input.value = state.value;
      input.setSelectionRange(state.start, state.end);
    }
  });

  input.addEventListener('keydown', function(event) {
    state.start = input.selectionStart;
    state.end = input.selectionEnd;
  });
}

<input id='tel' type='tel' data-filter='\+?\d{0,13}' placeholder='phone number'>

Above code takes copy & pasting, selecting, backspacing etc. into account where your current implementation fails.

Also, I modified the given regex to \+?\d{0,13} so it allows for incomplete input. Use HTML5 form validation to validate the final result.

Thanks le_m that works with IE – HDev007 Jun 08 '17 at 06:06 — HDev007, Jun 08 '17 at 06:06

score 0 · Answer 2 · answered Jun 07 '17 at 16:33

0

I think this regex is being applied only to the char code i.e. a string of length 1. In this case regex will always fail.

Instead, try running the regex test on the input value.

answered Jun 07 '17 at 16:33

Pratyush Sharma

257
2
7

var regex = new RegExp("^\\+{0,1}(?:\d\s?){1,13}$"); tried this also but didnt worked – HDev007 Jun 08 '17 at 01:11
Try this regex /\+[0-9]+(\s|$)/g – Pratyush Sharma Jun 08 '17 at 05:21

Using regex to restrict input in textbox

2 Answers2

Linked