Limit Input Characters to Formatted String Length

[tadarice]

It would be nice if the plugin would not allow users to input characters beyond the length of the auto formatted string.

Thanks.

[jackocnr]

On the libphonenumber JavaScript demo page, if I enter a number that is too short (e.g. "+1702123456"), the validation error message is the same for if it's too long i.e. "TOO_LONG", so we wouldn't be able to use that to determine if the number is too long. The only thing I think we could use is the formatting - notably the AsYouTypeFormatter adds formatting just fine while you're typing out the number, but then as soon as you add an extra digit (to make the number too long), all the formatting is removed. There must be a better way to test for this, but it makes me think it is possible.

[tadarice]

Ah, I see what they are doing. They are saying that a 7-digit phone number is valid. Like in the olden days when we only ever called people within our own area code. So, beyond 7 and not valid is "TOO_LONG" less than 7 is "TOO_SHORT." Then, 10 digits is valid again, and everything greater is also "TOO_LONG." I know that isn't very helpful, sorry.

I agree though, something in the code has to be triggering the formatting to stop once the number is too long. If we can find that and leverage it to stop adding to the string...

[jackocnr]

Thinking about it, it's just the formatter, so it'll just be following the format rules it has for that country, and as soon as it doesn't fit those rules (e.g. too many digits), it will just give up.

I just spotted that the "TOO_LONG" thing is a known issue, so I will implement it the hacky way I have described for now, but consider changing it when they fix this.

[tadarice]

Awesome! You are a rock star!

[jackocnr]

Added this in v3.1.0. Let me know if it works for you!

[tadarice]

This is working exactly the way I was picturing. Seriously, thanks a TON! This is perfect.

[rob101]

Is this a setting I need to set? I don't see this functionality in the current version.

[jackocnr]

This became an option (preventInvalidNumbers), which I ultimately removed this in v5.0.0.

"Removed preventInvalidNumbers as was wrongly using libphonenumber's AsYouTypeFormatter, which was broken and they explicitly said shouldn't be used for that"

[iamstarkov]

so is there a way to limit the number once it become over autoformat string?

[iamstarkov]

this should work

$('#form').find('input#phone').on('keyup', function(event) {
  var isValid = $('#phone').intlTelInput('isValidNumber')
  if (!isValid) {
    event.preventDefault();
  }
};);

[jackocnr]

No there is not currently a way to limit the number once it goes over the autoformat length.

Your code would not work because it would prevent entering the first digits of a number. One way to do it would be to check if the validation error returned is "TOO_LONG" but this is currently broken for US numbers - see above.

Also a lot of UX guides advise against this kind of prohibitive functionality.

[eudisd]

So what is the status of this @jackocnr will this be fixed or are there plans to fix?

[jackocnr]

No plans to add this functionality as IMO it is bad practice, not to mention the fact that there is no reliable way to do it (libphonenumber do not provide this functionality).

[Tofandel]

Couldn't we just prevent letters in the input with an option at least?

[mguinness]

Couldn't we just prevent letters in the input with an option at least?

I'm new to this library, but could you use the pattern attribute?

[jackocnr]

I have now added a strictMode option, which prevents users from entering invalid characters and caps the input at the maximum valid number length. Added in v20.2.0.