JavaScript com JustValidat: praticando a validação de formulários

Introdução ao Curso de Validação de Formulários

Olá! Meu nome é Rodrigo, sou instrutor e irei acompanhar vocês pelo mundo da validação de formulários.

Audiodescrição: Rodrigo é um homem de pele clara, com cabelos e barba curtos. Ele veste uma camiseta preta com o logotipo da Alura.

Descrição do Projeto de Validação

Recebemos do NBank a missão de validar um formulário de cadastro para novos clientes, e estou com ele aberto no navegador. Temos quatro campos: nome, CPF, idade e senha. Precisamos implementar algumas validações personalizadas para cada um desses campos. Por exemplo, o nome deve ser completo, não apenas o primeiro nome; o CPF não deve conter dígitos iguais; a pessoa que se cadastrar deve ter mais de 18 anos; e a senha deve ser forte, ou seja, deve ter no mínimo oito caracteres, incluindo letras maiúsculas, minúsculas, números e caracteres especiais.

Problemas Atuais e Solução Proposta

Atualmente, se tentarmos cadastrar apenas o primeiro nome, um CPF com todos os números iguais, informarmos que temos um ano de idade e uma senha de 1 a 9, e clicarmos no botão de cadastrar, conseguimos efetuar esse cadastro. Para evitar esse problema de cadastrar valores incorretos, utilizaremos a biblioteca JustValidate do JavaScript.

Utilização da Biblioteca JustValidate

A documentação da JustValidate está aberta e ela nos ajudará a criar validações personalizadas de maneira muito mais simples, pois possui regras pré-definidas que facilitarão todo o processo lógico necessário ao longo deste curso.

Público-Alvo do Curso

Se temos conhecimento sobre a criação de formulários utilizando HTML, CSS e JavaScript, e queremos descobrir como essas validações serão feitas com o JustValidate, este curso é ideal para nós. Estaremos aguardando na sequência.

Importação da Biblioteca JustValidate

Para realizar as validações no nosso formulário, utilizaremos a biblioteca JustValidate. Primeiramente, precisamos importar essa biblioteca para nosso projeto. Acesse a documentação na aba Getting Started e copie a tag <script> com o src correspondente. Em seguida, cole esse script no final do seu arquivo index.html, dentro da tag <body>, na linha 43.

<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<script src="script.js"></script>
</body>

Inicialização do JustValidate

Após salvar o documento, estamos prontos para iniciar as validações dos campos do formulário. Vamos abrir o arquivo script.js para começar a escrever as validações. Inicializamos o JustValidate dentro do nosso formulário criando uma constante validador, que recebe new JustValidate. Este método requer um parâmetro, que é o id do nosso formulário, no caso, #cadastro-form.

const validador = new JustValidate('#cadastro-form');

Adição de Campos para Validação

Com a inicialização concluída, passamos para a próxima etapa: adicionar os campos do formulário para que o JustValidate possa identificá-los e aplicar as validações. Utilizamos a constante validador e a função addField, que recebe dois parâmetros: o id do campo e uma lista de objetos representando diferentes validações.

validador.addField('#nome', []);
validador.addField('#cpf', []);
validador.addField('#idade', []);
validador.addField('#senha', []);

Validação de Campos Obrigatórios

A primeira regra que implementamos é a obrigatoriedade de preenchimento. No campo #nome, dentro da lista de objetos, adicionamos a regra required e uma mensagem de erro personalizada.

validador.addField('#nome', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    }
]);

Após isso, aplicamos a mesma regra aos outros campos, copiando o código da regra e colando nas listas de objetos dos campos #CPF, #idade e #senha.

validador.addField('#cpf', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    }
]);
validador.addField('#idade', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    }
]);
validador.addField('#senha', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    }
]);

Validação de Nome Completo

Além da regra de obrigatoriedade, criamos uma segunda regra para o campo #nome, que exige mais de uma palavra (nome e sobrenome). Para isso, utilizamos o Validator do JustValidate, que permite criar regras personalizadas.

validador.addField('#nome', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    },
    {
        validator: (value) => {
            return value.trim().split(" ").length >= 2;
        },
        errorMessage: 'Por favor, insira seu nome completo!'
    }
]);

Validação de CPF

Agora, vamos realizar a validação do CPF. Não há uma regra que verifique números repetidos no campo de CPF, então precisamos criar uma validação personalizada.

validador.addField('#cpf', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    },
    {
        validator: (value) => {
            return !/(\d)\1{10}/.test(value.replace(/\D/g, ''));
        },
        errorMessage: 'Os números do CPF estão repetidos'
    }
]);

Validação de Idade

Para a validação de idade, verificaremos se a pessoa tem mais de 18 anos para se cadastrar.

validador.addField('#idade', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    },
    {
        rule: 'minNumber',
        value: 18,
        errorMessage: 'Você deve ter mais de 18 anos para se cadastrar'
    }
]);

Validação de Senha

Por fim, falta o campo de senha. A senha precisa ter, no mínimo, oito dígitos, letras maiúsculas, minúsculas, números e caracteres especiais.

validador.addField('#senha', [
    {
        rule: 'required',
        errorMessage: 'Este campo é obrigatório!'
    },
    {
        rule: 'strongPassword',
        errorMessage: 'A senha precisa ter 8 dígitos, incluindo letras maiúsculas, minúsculas, número e caracteres especiais'
    }
]);

Conclusão das Validações

Com essas regras implementadas, nosso formulário está configurado para validar os campos conforme necessário. Salve o arquivo e verifique se as validações estão funcionando adequadamente no formulário.

Introdução ao Formulário de Cadastro

Agora, temos um formulário de cadastro muito mais completo e seguro. Vamos relembrar o que abordamos nesta aula. Utilizamos a biblioteca JustValidate e aprendemos a criar validações personalizadas, além de utilizar regras pré-definidas dessa biblioteca. Também empregamos expressões regulares para auxiliar em validações, como as do CPF.

Exemplo de Validação de Formulário

Para ilustrar como as validações são aplicadas, considere o seguinte exemplo de URL que simula o envio de dados através de um formulário:

http://127.0.0.1:5500/index.html?nome=Rodrigo&cpf=11111111111&idade=18&senha=123456789

Essa URL representa um formulário onde os dados do usuário, como nome, CPF, idade e senha, são enviados. A biblioteca JustValidate nos permite garantir que esses campos sejam preenchidos corretamente e que atendam a critérios específicos, como o formato do CPF.

Feedback Imediato ao Usuário

Além disso, ao implementar as validações, podemos fornecer feedback imediato ao usuário. Por exemplo, se um campo obrigatório não for preenchido, podemos exibir uma mensagem de erro como:

Este campo é obrigatório!

Essa mensagem ajuda a guiar o usuário para corrigir o erro e completar o formulário corretamente.

Próximos Passos e Comunidade

No entanto, não paramos por aqui. A seguir, apresentaremos uma lista com várias atividades para praticar as validações em outros cenários.

Se gostamos deste conteúdo, podemos avaliar o curso e compartilhar o que achamos mais interessante. Caso tenhamos dúvidas, podemos recorrer ao fórum para esclarecê-las. Além disso, é uma boa ideia visitar o fórum se quisermos ajudar outras pessoas, pois sempre aprendemos muito mais quando ajudamos os outros.

Se desejamos participar de uma comunidade engajada e apaixonada por tecnologia, podemos nos juntar ao Discord de estudantes.

Nos encontramos em um próximo vídeo. Até mais!