Ao desenvolver um formulário de contato para um site ou aplicativo, uma das preocupações principais é garantir que os dados fornecidos pelos usuários sejam inseridos de forma correta e padronizada. Uma das informações mais sensíveis nesse contexto é o CPF ou CNPJ, dados cruciais para a identificação e contato dos clientes. Entretanto, esses números possuem formatos específicos que podem dificultar a entrada manual. Felizmente, o jQuery Mask oferece uma solução elegante para esse problema, simplificando o processo de tratamento desses dados.
Por que usar jQuery Mask?
O jQuery Mask é uma biblioteca JavaScript que permite formatar facilmente a entrada de texto em campos de formulário. Com ele, é possível definir máscaras que determinam como os dados devem ser inseridos, facilitando a compreensão e padronização. No contexto de formulários de contato, o uso do jQuery Mask para tratar CPFs e CNPJs simplifica a experiência do usuário, garantindo que esses dados sejam inseridos de forma correta e consistente.
Como Instalar o jQuery e jQuery Mask:
Antes de começar a utilizar o jQuery Mask, é necessário incluir as bibliotecas do jQuery e do jQuery Mask em seu projeto. Você pode fazer isso facilmente utilizando o CDN (Content Delivery Network) do jQuery. Adicione o seguinte código dentro da tag <head> do seu documento HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
Outra opção, seria realizar os downloads das biblioetecas no seu projeto e realizar as chamativas de acordo com o caminho escolhido.
Código para Tratar CPF/CNPJ:
Uma vez que as bibliotecas estão incluídas em seu projeto, você pode utilizar o seguinte código jQuery para aplicar máscaras ao campo de CPF/CNPJ em seu formulário de contato:
$('#cpfcnpj').mask('000.000.000-00', {
onKeyPress : function(cpfcnpj, e, field, options) {
const masks = ['000.000.000-000', '00.000.000/0000-00'];
const mask = (cpfcnpj.length > 14) ? masks[1] : masks[0];
$('#cpfcnpj').mask(mask, options);
}
});Este código define uma máscara inicial para o campo #cpfcnpj como um CPF (###.###.###-##). Em seguida, utiliza a função onKeyPress para verificar o comprimento do valor inserido no campo. Se o valor inserido tiver mais de 14 caracteres, ele trocará a máscara para um CNPJ (##.###.###/####-##), garantindo que o formato seja atualizado automaticamente conforme o usuário digita.
Observação: Lembre-se de alterar o nome do ID do seu input para "cpfcnpj".
Conclusão:
Ao integrar o jQuery Mask em seu formulário de contato, você simplifica significativamente o processo de entrada de CPFs e CNPJs, garantindo que esses dados sejam inseridos de forma correta e padronizada. Isso não apenas melhora a experiência do usuário, mas também facilita a posterior manipulação e validação desses dados. Com o código fornecido e as instruções de instalação, você pode implementar essa funcionalidade em seus projetos facilmente, garantindo uma interação suave e intuitiva com seus formulários de contato.
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.