Как правильно задать pattern в inpuy type tel?

Question

[Cheizer]

Подскажите пожалуйста, как в форме у input задать pattern правильно.

Сейчас так

<input type="tel" name="Phone"  value="" placeholder="Ваш телефон *" pattern="[0-9]*">

Но при таком pattern форма не отправляется если ввести номер телефона через +7 так же не отправляется если ввести номер со скобками 1(222)44444444 или пробелами.
JS библиотеки маски не хочется использовать.
Вопрос, как добавить возможность кроме цифр, пробелы, + и скобки?

Answer 1

[Тигран Абрамян]

Держите в паттерне ставьте эту проверку

^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$

На всякий пожарный.
https://www.regextester.com/99415
https://www.regexpal.com/94215

Comments

[Cheizer]

Спасибо, но не работает :( просто если ввести 89031234567

[Тигран Абрамян]

Роман Кузнецов, Эм, я тогда хз, когда ставлю в первом сайте который отправил, то там если задний фон становится синим то значит все прекрасно.

[Cheizer]

TAbrahamyan, ладно, спасибо, тут похоже придется маску JS библиотеку ставить, заставлять по маске вводить.

[Тигран Абрамян]

Роман Кузнецов, Вообще правильнее через js все делать, ато можно будет через F12 (Element) удалить этот pattern и пройти форму.

[Cheizer]

TAbrahamyan, это да, не хочется просто ради одной формы громоздкую js библиотеку подключать