Olá desenvolvedores, hoje aprenderemos a validação de campos obrigatórios, porém dessa vez, com JavaScript. No tutorial anterior, implementamos a validação no back-end com Java, usando JSP e servlet. No entanto, minha recomendação é que você a implemente tanto no lado do servidor quanto no lado do cliente.

Antes da implementação da validação no back-end, haviam dois problemas, o primeiro é que nossa aplicação permitia “salvar” campos vazios. E o segundo, diretamente ligado ao primeiro era a utilização de recursos de processamento sem necessidade, se não há dados a serem salvos não há porque o sistema percorrer cada campo.

Assim, o que fizemos foi encerrar o fluxo de processamento tão logo seja encontrado o primeiro campo vazio e assim informar ao usuário e solicitar que ele preencha todos os campos do formulário ou o campo em questão. Agora iremos replicar este raciocínio no lado do cliente, isto é, no front-end com Javascript.

VALIDANDO PELO FRONT-END

E você pode estar se perguntando, uma vez que fizemos a validação do lado do servidor, por que é necessário fazê-la também do lado do cliente? A validação no front-end é para que não seja preciso enviar uma requisição para o servidor, para que como mencionado na sessão acima, recursos de processamento sejam consumidos sem que seja necessário.

Assim, faremos essa validação de campos obrigatórios diretamente no formulário com Javascript, que nos permite qualquer implementação de regra de negócio no navegador. È importante você saber que enquanto o Java trabalha com classes o Javascript trabalha com funções. Desse modo iremos criar uma função de validarCampos(), onde implementaremos a validação.

Antes, porém, na página cadastroUsuario.jsp, na tag <form> adicionaremos o evento onsubmit que retornará a função validarCampos(). O onsubmit será acionado sempre que o formulário for enviado, ou seja, sempre que submetermos um formulário clicando em salvar, o evento onsubmit é acionado e tudo que está dentro dele é executado, neste caso a função validarCampos().

A função validarCampos() será escrita entre as tags <javascript>. E se o retorno da função for false, o formulário não será enviado e uma mensagem de alerta será exibida para o usuário.

Dentro da função o laço de decisão if fará a verificação, se o campo estiver vazio um alert será disparado e a função retornará false, e o mesmo procedimento servirá para todos os campos, nome, senha e telefone.

Para a verificação utilizaremos o document.getElementById, onde “document” faz referência ao DOM – Document Object Model, a árvore de elementos do HTML. Ao passo que getElementByID, é uma função que retorna um elemento do DOM que esteja referenciado pelo ID (Identificador).

E ao final de todos os ifs e elses a função retorna true, porque se todos os dados tiverem sido informados o cadastro poderá ser realizado.

EM POUCAS PALAVRAS

Sintetizando, o método Javascript deve retornar false ou true, assim se algum elemento da página deixou de ser informado, será dado o alert e retornará false, para que o formulário não seja enviado para o lado da servlet. Se o retorno for true o cadastro estará liberado, e o formulário será enviado.

O return dentro da tag form, invoca a função validarCampos(), assim se passar por todas as validações o formulário será enviado, caso contrário não será enviado. E dessa forma criamos a validação tanto do lado do cliente quanto do lado do servidor. Onde a validação de campos obrigatórios com o Javascript, permite que não sejam consumidos processamento e tempo de resposta. Eu fico por aqui, e nós nos vemos no próximo tutorial.