Phone Number Input

I am looking for suggestions on the best way to enter US phone numbers by a user. I am currently using a BS4 Input control with the inputmode and inputtype set to tel. But the field seems to allow any input, as if I didn’t set the types. I’d like to “force” the user to input a valid telephone number.

And while we’re at it, the email setting doesn’t seem to have any effect either.

A little googling and I see I need a pattern attribute. I added pattern=“[0-9]{3}-[0-9]{3}-[0-9]{4}” to the attributes for the input control and it shows in the chrome inspector. However, it does not do any matching. The sample at W3Schools Tryit Editor works, in that it does check the pattern, but only when you exit the field (or click submit).

And, even if the matching did work, it’s not very flexible. The user in the above case would need to enter the dashes between each number group.