Не проверяет номер телефона. В чем ошибка?

Question

[Софья Платонова]

Когда поле находится в фокусе и если поле было пустым, должно появится значение +7, если уже было введено какое-либо значение, это не выполняется. Далее, после снятия фокуса с поля, появляются 2 сообщения о том, что поле было покинуто и само введенное значение, выполнятся сравнение введенного значения с регулярным выражением (проверяла правильность шаблона в редакторе регулярных выражений), если функция возвращает true, появляется сообщение о совпадении, иначе о не совпадении и поле выделяется красным, а внизу поля появляется еще одно сообщение.
Проверка, похоже, вообще не происходит, потому что у меня выпадает только первые два сообщения, о покидании поля и значение поля.

<input type="text" name="telephone" id="telephone" onfocus="focusTelephone(this.value)" onblur="checkTelephone(this.value)" placeholder="Телефон" /><br />
<span id="error_telephone" style="display:none; color:red"></span>

function focusTelephone(box) {
	if (box == "") {
		$("#telephone").val("+7")
	};
}

function checkTelephone(telephone) {
	alert("Вы покинули поле телефона!");
	alert(telephone);

	let format = new RegExp("^(\+7)+([0-9]{10})$");
	let error_tel = "Номер телефона введён некорректно! Пример ввода: [phone]<br />";

	if (format.test(telephone) == true) {
		alert("Match");
		$("#telephone").css("border-color", "green");
		$("#error_telephone").html("");
		$("#error_telephone").css("display", "none");
	} else {
		alert("Not match");
		$("#telephone").css("border-color", "red");
		$("#error_telephone").html(error_tel);
		$("#error_telephone").css("display", "block");
	};
}

*я добавила еще поле email, чтобы было видно, ошибки в формулировке кода нет
**выводится ошибка в регулярном выражении, но повторюсь, я проверяла его в редакторе
***если регулярное выражение для номера телефона ^(\+7)+([0-9]{10})$ заменить на ^(\+7) или \d{12}, то проверка выполняется, но собственно, регулярное выражение не верное, мне необходимо, чтобы номер телефона начинался с +7, а остальная часть состояла из цифр без пробелов, скобок и тире

Comments

[ThunderCat]

в фиддл оформите

[ThunderCat]

и откуда эти древнедедовские onfocus="focusTelephone(this.value)" прям в хтмл?

[Османов Осман]

ThunderCat, есть такой атрибут у html

[Gennady S]

Вы же jQuery используете, лучше завязывать события на нее.

$(document).ready(function() {
  $('#telephone').on('blur', function (event) {
    let val = $(event.target).val();
    // логика
  });
});

Второй момент, есть же отладчик. В консоли браузера (вкладка Sources, ищите) поставьте точку остановки в начале функции, и пройдитесь по шагам, что и где получается. Моментально найдете решение тривиальной рабочей ситуации.

[Софья Платонова]

ThunderCat, ну уж извините, так учат в университетах!

[Софья Платонова]

Gennady S, ThunderCat, я прекрасно понимаю, что использую древние методы, но в данном случае это не имеет значения. В ответах уже правильно написали, что ошибка в регулярных выражениях, так что, если Вы знаете, как корректно написать шаблон, пишите об этом, так как другой способ написания, даже древний, не является ошибкой

[Gennady S]

Софья Платонова, понимаю, что это не ответ на вопрос, но порой советы полезнее, чем одна исправленная ошибка. Удачи в учебе!

[Софья Платонова]

Gennady S, конечно, я с Вами согласна. Спасибо большое за Ваш совет! Но меня больше раздражают высказывания подобные: "...эти древнедедовские методы..." Да, Вы такого не писали, но попали под горячую руку, учитывая, что Вы написали как раз про более удобную и современную вариацию кода. Простите, что так вышло! Еще раз спасибо!!!

Answer 1

[Софья Платонова]

Регулярное выражение для номера телефона по данному условию выглядит так:
^[\+][7]{1}[0-9]{10}$

Answer 2

[Олег]

Упрощённо работает так

Answer 3

[Олег]

htmlbook.ru/samhtml5/formy/pole-dlya-telefona
input type=tel
https://developer.mozilla.org/ru/docs/Web/CSS/:invalid
можно без js сделать

https://habr.com/ru/post/332804/ - статья