Aplicando a Validação e Máscara de DDI

Instalação da Biblioteca intl-tel-input

Primeiro, inclua a biblioteca intl-tel-input no seu projeto. Você pode fazer isso inserindo os seguintes links no cabeçalho da página onde o formulário estará, via Elementor:

Adicionando o JavaScript e CSS ao WordPress

Você pode adicionar o código JavaScript e CSS diretamente ao cabeçalho ou rodapé da página usando o Elementor ou um plugin de snippets. Aqui estão duas formas comuns:

1.1 Usando o Elementor (Método Simples)

Você pode adicionar o código diretamente dentro do Elementor na página que está editando:

Editar a página com Elementor:
- No WordPress, acesse “Páginas” e clique em “Editar com Elementor” na página desejada.
Adicionar um widget de HTML:
- Arraste o widget “HTML” para o local desejado na página.
- Cole o código JavaScript e o link CSS no campo de HTML, assim como no exemplo abaixo.

				
					<!-- CSS -->

<!-- JS -->
<script data-minify="1" src="//cesarborges.com.br/wp-content/cache/min/1/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.min.js?ver=1742690336"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var phoneInput = document.querySelector("#phone");

    // Inicializar o intl-tel-input no campo de telefone
    var iti = window.intlTelInput(phoneInput, {
      separateDialCode: true,
      initialCountry: "br",
      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js"
    });

    // Adiciona um listener para garantir que apenas números sejam inseridos
    phoneInput.addEventListener('input', function() {
      // Remove todos os caracteres que não são números
      this.value = this.value.replace(/[^0-9]/g, '');
    });

    // Validação no envio do formulário
    var form = document.querySelector("form");
    form.addEventListener("submit", function(event) {
      // Verifica se o campo de telefone está vazio
      if (phoneInput.value.trim() === "") {
        event.preventDefault();
        alert("O campo de telefone não pode estar vazio.");
        return; // Interrompe a execução
      }

      // Verifica se o número de telefone é válido
      if (!iti.isValidNumber()) {
        event.preventDefault();
        alert("Por favor, insira um número de telefone válido.");
      } else {
        // Formatar o número de telefone antes do envio
        var fullNumber = iti.getNumber();
        phoneInput.value = fullNumber;
      }
    });
  });
</script>