¿Por qué el campo de entrada permite caracteres alfabéticos y no restringe la entrada solo a números?
<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">No restringe los tipos de caracteres que se pueden ingresar, pero los navegadores evitarán el envío si el valor de entrada no coincide con su patrón.
Si no desea permitir ciertas entradas de caracteres, puede usar JavaScript para eliminar esos caracteres: onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');" .
input:invalid { color: red; } <form> <input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');"> <input type="submit" value="Submit"> </form>Debido a que muchos países usan char en los números de teléfono como el espacio '+-()', etc.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
El enlace de Andy a la documentación tenía la respuesta que estaba buscando.
el valor de entrada no se valida automáticamente en un formato particular antes de que se pueda enviar el formulario, porque los formatos de los números de teléfono varían mucho en todo el mundo