Маска для телефона

Чтобы для поля с телефоном создать такую маску (+7 (___) ___-__-__), нужно сделать следующее:

• Установить скрипт jquery.maskedinput.min
• Прописать для телефонных полей (.wpcf7-tel — универсальный класс для полей с телефоном) простой скрипт:

// Маска для телефона 
$(document).ready(function() {  
	$('.wpcf7-tel').mask('+7 (999) 999-9999'); 
});

IMask

Еще один классный скрипт по маске поля.

<script src="https://unpkg.com/imask"></script>

Код инициации:

IMask(
  document.getElementById('phone-mask'),
  {
    mask: '+{7}(000)000-00-00'
  }
);

С проверкой и отключением кнопки send:

var phoneMask = IMask(document.getElementById('phone-mask'), {
	mask: '+{7} (000) 000-00-00'
}).on('accept', function() {
	document.querySelector("#payment-form .submit-button").setAttribute("disabled", "");
}).on('complete', function() {
	document.querySelector("#payment-form .submit-button").removeAttribute("disabled");
});

Проверка в рамках другой проверки:

var phoneMask = IMask(document.getElementById('phone-mask'), {        
	mask: '+{7} (000) 000-00-00'    
});

if(phoneMask.on()['_unmaskedValue'].length != 11) {
	jQuery(this).addClass('not-filled');
}

Применить маску к классу:

$('.phone-mask').each(function(){
	IMask(jQuery(this)[0], {
		mask: '+{7} (000) 000-00-00'
	});
});

И еще одна проверка внутри формы, когда маска применяется по классу:

$('.form-payment').on('change', function(){

	var form = jQuery(this);

	var phoneMask = IMask(form.find('[name="custNumber"]')[0], {
		mask: '+{7} (000) 000-00-00'
	});


	form.find("*").removeClass('not-filled');

	form.find('input[type="text"].required, textarea.required').each(function() {

		if (jQuery(this).attr('name') === 'custNumber') {

			if(phoneMask.on()['_unmaskedValue'].length != 11) {
				jQuery(this).addClass('not-filled');
			}

		} else if (jQuery(this).attr('name') === 'custEmail') {

			// Проверка E-mail
			if (jQuery(this).val() === '') {
				jQuery(this).addClass('not-filled');
			} else if (!validateEmail(jQuery(this).val())) {
				jQuery(this).addClass('not-filled');
			}		

		} else {
			if (jQuery(this).val() === '') {
				jQuery(this).addClass('not-filled');
			}
		}

	});		


	if ( form.find("*").hasClass('not-filled') ) {
		form.find('.submit-button').attr("disabled", "");
	} else {
		form.find('.submit-button').removeAttr("disabled");
	}

});

[site-socialshare]