4

Estou criando um formulário o qual preciso validar: E-mail, CPF, Data de Nacimento, Telefone para Contato, Telefone Opcional.

Alguém sabe como fazer isso com aquela "máscara", que quando a pessoa digita a data por exemplo, não necessita inserir as "/" barras, o javascript faz isso. Assim como nos outros campos que citei?

Outra coisa, nos outros campos como Nome, Endereço, etc..., se não forem inserido os dados, emite um alerta pedindo para que seja inserido.

Exemplo:

inserir a descrição da imagem aqui

Observação: Javascript Puro.....

1
  • Você está pedindo muita coisa
    – user37626
    Commented 28/08/2016 às 19:20

2 Respostas 2

11
+100

Você pode utilizar o jQuery Mask para realizar as formatações do input: O código ficará assim:

 $('.cpf').mask('000.000.000-00', {reverse: true});
 $('.date').mask('00/00/0000');
 $('.phone_with_ddd').mask('(00) 0000-00000');

E para a validação você poderá usar a validação HTML5 ou utilizar um plugin para isso, tal como o Parsley.

Quando você tiver dúvidas mais formadas e não tão genéricas assim, abra uma nova pergunta específica.

11
  • Amigo, gostaria de fazer utilizando javascript puro. É possível? Commented 21/08/2016 às 16:20
  • 2
    Recomendo que você utilize um plugin para isso, sei que temos como premissa fazer tudo para garantir a estabilidade. Mas tenha em mente que usando um plugin você já vai ter resolvido problemas que outras pessoas da comunidade passaram e contribuiram em um projeto para que outras pessoas não passem. No caso de masks, existem muitos problemas de compatibilidade principalmente em mobile. Commented 21/08/2016 às 16:23
  • Vou fazer uns testes. :) Commented 21/08/2016 às 16:30
  • Amigo, e desse Parsley, como ficaria o código? Commented 21/08/2016 às 16:32
  • A implementação do Parsley é bem complexa, recomendo que você leia a documentação dele e dê uma olhada no exemplo: parsleyjs.org/doc/examples/simple.html# Commented 21/08/2016 às 16:47
5

Você pode utilizar uma biblioteca externa chamada Lightweight Pure JavaScript o nome ja diz tudo.

Utilização Básica

Importar o arquivo

<script src="input-mask.js" ></script>

Exemplo de aplicação para o campo Data

new InputMask().Initialize(document.querySelectorAll("#date"),{
  mask: InputMaskDefaultMask.Date, 
  placeHolder: "Date: 01/01/2015" 
});

Na biblioteca você irá encontrar mais exemplos como a de validação de telefone e Social Security Number (SSN)(como a identidade aqui no brasil) você pode realizar a leitura dos exemplos e aplicar em sua página da forma que deseja.

Você pode visualizar esta biblioteca externa funcionando aqui.

Clique aqui para visualizar a Fonte.

4
  • Ainda não é a resposta que espero. :( Commented 28/08/2016 às 0:07
  • 1
    @AlexandreLopes o que posso fazer para melhorar minha resposta ?
    – stringnome
    Commented 28/08/2016 às 1:40
  • Tá tudo muito complexo. Era pra ser tão simples :'( Commented 28/08/2016 às 1:40
  • 3
    Alexandre.. mais simples do que já te responderam seria alguém fazer o seu trabalho.. Commented 28/08/2016 às 17:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .