Как проверить правильно валидацию телефона?

Question

[ya39]

Делаю проверку на заполненность телефона, просто проверкой маски, но на фокусауте передается значение val() и потом ощищается, поэтому срабатывает проверка, когда человек вообще ничего не ввел в инпут, как сделать так, чтобы валидация работала, при полном корректном вводе?

вот проверка сама:

jQuery('input[type="tel"]').mask('[phone]');

jQuery('.input__phone').focusout(function(){
	if (jQuery('.input__phone').val()=='+7 (___) ___-__-__') {
		jQuery('.input__phone').removeClass('input__green');
		jQuery('.input__phone').addClass('input__red');
		jQuery('.sign_error').remove();
		jQuery('.input__phone').before('<div class="sign_error">Заполните в правильном формате</div>');
	} else {
		jQuery('.input__phone').removeClass('input__red');
		jQuery('.input__phone').addClass('input__green');
		jQuery('.sign_error').remove();
	}
});

Answer 1

[Вадим]

Чтобы проверить что введённое значение действительно верно и соответствует Вашей маске, можно воспользовваться регулярным выражением:

/\+7\s\(\d{3}\)\s\d{3}\-\d{2}\-\d{2}/.test(jQuery('.input__phone').val()) // Проверяет значение на соответствие вашей маске. Если возвращает true - значит поле заполнено верно.

А ещё искать элементы в DOM при каждом наступлении события - не очень хорошо для производительности. Обращение к DOM дорагая операция. Лучше вынести поиск элементов за пределы функции, сохранить в переменные и обращаться к переменным. Или обращаться с помощью this в функции обработчике.

Comments

[ya39]

Спасибо, помогло, насчет того, что нет this - согласен, это я делаю типо демо страницы, поэтому тут такой кривой код, потом это все все равно удалят)