Best plugin to mask fields

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)

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!