Best plugin to mask fields

Plugin ajuda e funciona em todas as versões. This topic was modified 1 year, 2 months ago by coyotefreman . @coyotefreman atualize agora que vai funcionar. Mas podia solicitar suporte antes de dar uma avaliação ruim, pois eu pedi e foi resolvido em minutos! @coyotefreman We’ve just released version 4.1.0, Please update to the latest version, and it will work with Pro elements as well. If you still encounter any issues, feel free to raise a support ticket . Eu altero a avaliação, me perdoe… Não achei que fossem tão rapidos, mas vi só hoje. É o seguinte, notei que a atualização não desativou o plugin, mas ainda sim, não funciona com o Pro Elements. E funcionava certinho… (Data de hoje, 19/03/25) If the issue is resolved, we would appreciate it if you could update your star rating to 5 stars. You can find the new mask options inside the Text field >> Advanced Tab. If you still face any issues, please feel free to raise a support ticket , and we’ll be happy to assist you! Olá pessoal! Bom, eu percebi que o plugin voltou a funcionar com Pro Elements, isso é bom, mas há uma questão bem complexa para quem faz anúncios, que são os cadastros inválidos. Ao longo do tempo, percebi que o plugin aplica a máscara, mas nunca impedia que as pessoas fossem obrigadas a digitar os 11 digitos (exemplo do padrão de telefone celular do Brasil). Para isso, desabilitei o plugin e consegui fazer um código que aplica a máscara, verifica se há 11 digitos e valida via javascript. Vou deixar o codigo aqui, seria interessante se tivesse essa opção no plulgin, de fato, seria algo que ajudaria a todos. No meu exemplo, precisei fazer algumas coisas: 1) Campo tipo texto; 2) Desmarquei a opção “Obrigatório”; 3) Coloquei o ID no campo de “telefone” e “telefonezap” (uso formulários diferentes). 4) Coloquei o código em “Custom Code” antes do fechamento da “/body”. Abaixo o código que funciona: <script> jQuery(document).ready(function($) { // Ajuste aqui os IDs que você quer selecionar var PHONE_SELECTORS = '#form-field-telefone, #form-field-telefonezap'; // Função para esperar que elementos estejam disponíveis function whenElementReady(selector, callback) { if ($(selector).length) { callback($(selector)); } else { setTimeout(function() { whenElementReady(selector, callback); }, 100); } } // ------------------------------------------- // 1) Funções de formatação e validação // ------------------------------------------- function formatPhoneNumber(e) { var input = this; // Define configurações do campo input.setAttribute('placeholder', '(00) 00000-0000'); input.setAttribute('maxlength', '15'); // Obtém apenas os números do valor atual var value = input.value.replace(/\D/g, ''); // Formata o número conforme digitado if (value.length > 0) { value = value.replace(/^(\d{2})(\d)/, '($1) $2'); value = value.replace(/(\d)(\d{4})$/, '$1-$2'); } // Atualiza o valor do campo input.value = value; // Valida em tempo real validatePhone(input); } function validatePhone(input) { // Obtém apenas os números para validação var unformattedValue = input.value.replace(/\D/g, ''); // Verifica se tem 11 dígitos if (unformattedValue.length === 11) { // Número completo - remove erro input.setCustomValidity(''); $(input).removeClass('phone-error'); hideErrorMessage(input); // Marca como válido com atributo de dados input.setAttribute('data-valid', 'true'); } else { // Número incompleto - adiciona erro input.setCustomValidity('Insira corretamente o DDD+Número do telefone por favor (11 dígitos)'); $(input).addClass('phone-error'); // Marca como inválido com atributo de dados input.setAttribute('data-valid', 'false'); } } function showErrorMessage(input) { // Procura mensagem existente ou cria nova var errorContainer = $(input).siblings('.phone-error-msg'); if (errorContainer.length === 0) { errorContainer = $( '<div class="phone-error-msg" style="color: red; font-size: 12px; margin-top: 5px;">'+ 'Insira corretamente o DDD+Número do telefone (11 dígitos)'+ '</div>' ); $(input).after(errorContainer); } errorContainer.show(); // Destaca visualmente o campo $(input).css('border-color', 'red'); } function hideErrorMessage(input) { $(input).siblings('.phone-error-msg').hide(); $(input).css('border-color', ''); } // ------------------------------------------- // 2) Aplica eventos e atributos ao(s) campo(s) de telefone // ------------------------------------------- function applyMaskEventsToInputs(context) { // Seleciona todos os campos com ID #form-field-telefone OU #form-field-telefonezap var phoneInputs = context.querySelectorAll(PHONE_SELECTORS); phoneInputs.forEach(function(phoneInput) { // Remove qualquer configuração anterior (para evitar duplicação de eventos) $(phoneInput).off('input focus blur invalid'); // >>> REMOVE atributos que causam validação nativa phoneInput.removeAttribute('required'); phoneInput.removeAttribute('pattern'); phoneInput.removeAttribute('type'); phoneInput.removeAttribute('oninvalid'); phoneInput.removeAttribute('aria-required'); phoneInput.removeAttribute('data-required'); // >>> Agora define apenas o que você precisa phoneInput.setAttribute('type', 'tel'); phoneInput.setAttribute('inputmode', 'tel'); phoneInput.setAttribute('autocomplete', 'tel'); phoneInput.setAttribute('data-valid', 'false'); // Inicia como inválido // Aplica eventos de máscara e validação phoneInput.addEventListener('input', formatPhoneNumber); phoneInput.addEventListener('focus', formatPhoneNumber); // Evento ao sair do campo para mostrar erro se necessário phoneInput.addEventListener('blur', function() { var unformattedValue = this.value.replace(/\D/g, ''); if (unformattedValue.length > 0 && unformattedValue.length !== 11) { showErrorMessage(this); } else { hideErrorMessage(this); } }); // Sobrescreve o comportamento de validação nativa phoneInput.addEventListener('invalid', function(e) { e.preventDefault(); // Impede a mensagem nativa do navegador showErrorMessage(this); }); // Aplica formatação inicial caso já tenha valor if (phoneInput.value) { formatPhoneNumber.call(phoneInput); } // Marca como inicializado phoneInput.classList.add('phone-mask-initialized'); // Log para depuração console.log('Máscara aplicada a campo de telefone:', phoneInput); }); } // ------------------------------------------- // 3) Aplica a formatação aos campos existentes // na página principal, com verificação contínua // ------------------------------------------- function initializeAllForms() { console.log('Inicializando todos os formulários'); applyMaskEventsToInputs(document); // Verificação adicional para formulários que podem carregar com atraso whenElementReady(PHONE_SELECTORS, function(elements) { console.log('Campos de telefone encontrados:', elements.length); elements.each(function() { if (!this.classList.contains('phone-mask-initialized')) { console.log('Aplicando máscara a campo de telefone não inicializado'); applyMaskEventsToInputs(document); } }); }); } // Inicialização imediata initializeAllForms(); // Verificação adicional após carregamento completo da página $(window).on('load', function() { setTimeout(initializeAllForms, 500); }); // ------------------------------------------- // 4) Monitoramento de novos elementos e popups // ------------------------------------------- // Observer para detectar novos elementos na página var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes && mutation.addedNodes.length > 0) { for (var i = 0; i < mutation.addedNodes.length; i++) { var node = mutation.addedNodes[i]; if (node.nodeType === 1) { // Elemento DOM // Verifica se dentro desse node existem campos de telefone if (node.querySelector && node.querySelector(PHONE_SELECTORS)) { console.log('Novo campo de telefone detectado por MutationObserver'); applyMaskEventsToInputs(node); } } } } }); }); // Configura o observer observer.observe(document.body, { childList: true, subtree: true }); // Suporte específico para popups do Elementor $(document).on('elementor/popup/show', function(event, popupId) { console.log('Popup do Elementor detectado:', popupId); setTimeout(function() { var popupElement = document.getElementById('elementor-popup-modal-' + popupId); if (popupElement) { applyMaskEventsToInputs(popupElement); } }, 300); }); // ------------------------------------------- // 5) Intercepta eventos de formulário // ------------------------------------------- // Função auxiliar para validar todos os campos de telefone em um formulário function validateAllPhonesInForm(form) { var phoneInputs = form.find(PHONE_SELECTORS); var anyInvalid = false; phoneInputs.each(function() { var digits = $(this).val().replace(/\D/g, ''); if (digits.length !== 11) { // Marca como inválido e mostra erro showErrorMessage(this); this.setCustomValidity('Insira corretamente o DDD+Número do telefone por favor (11 dígitos)'); anyInvalid = true; } else { // Se estiver correto, remove erro hideErrorMessage(this); this.setCustomValidity(''); } }); return !anyInvalid; // Se não há inválidos, retorna true } // Intercepta o clique no botão de envio $(document).on('click', '.elementor-form .elementor-button', function(e) { var form = $(this).closest('.elementor-form'); if (!validateAllPhonesInForm(form)) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); alert('Insira corretamente o DDD+Número do telefone por favor (11 dígitos)'); return false; } else { console.log('Todos os campos de telefone são válidos, permitindo envio do formulário'); // Tenta novamente caso o Elementor trave o envio por outro motivo setTimeout(function() { if (form.find('.elementor-message-error').is(':visible')) { console.log('Erro de envio detectado, tentando novamente'); form.find('.elementor-button').trigger('click'); } }, 200); } }); // Intercepta submissão do formulário (backup adicional) $(document).on('submit', '.elementor-form', function(e) { var form = $(this); if (!validateAllPhonesInForm(form)) { e.preventDefault(); e.stopPropagation(); return false; } else { console.log('Formulário enviado, todos os telefones estão válidos'); } }); // ------------------------------------------- // 6) Suporte específico para formulários problemáticos na página principal // ------------------------------------------- // Verificação periódica de formulários com erros (pode ajudar com os formulários na página principal) setInterval(function() { $('.elementor-form').each(function() { var form = $(this); var errorMsg = form.find('.elementor-message-error'); if (errorMsg.is(':visible')) { // Verifica se todos os telefones estão válidos var allPhonesOk = true; form.find(PHONE_SELECTORS).each(function() { var digits = $(this).val().replace(/\D/g, ''); if (digits.length !== 11) { allPhonesOk = false; } }); if (allPhonesOk) { console.log('Detectado formulário com erro mas todos os telefones são válidos, tentando resolver'); // Força a validade do campo form.find(PHONE_SELECTORS).each(function() { this.setCustomValidity(''); }); // Esconde a mensagem de erro do Elementor errorMsg.hide(); } } }); }, 1000); // Adiciona estilos CSS para campos com erro $('<style>') .prop('type', 'text/css') .html( <br> #form-field-telefone.phone-error,<br> #form-field-telefonezap.phone-error {<br> border-color: red !important;<br> }<br> .phone-error-msg {<br> color: red;<br> font-size: 12px;<br> margin-top: 5px;<br> }<br> ) .appendTo('head'); // Registra informações de debug console.log('Script de máscara de telefone (multi-campos) carregado e inicializado'); }); </script> Obrigado por disponibilizar esse plugin, uso há anos. Minha intenção é apenas ajudar. Forte abraço!