Tutorial Validacao Form Jquery

1

Validação de Formulário
com jQuery
Atualmente, a validação de formulários em JavaScript é muito utilizada para garantir que
os dados solicitados nos campos sejam preenchidos de forma correta. A validação de
dados por meio de programação JavaScript é feita no navegador, do lado do cliente ou
cliente-side (sem necessidade de ir até o servidor para transmitir dados) e ajuda a garantir
a consistência quando os dados são enviados.
A validação no cliente é necessária em várias situações: quando, por exemplo, o endereço

de e-mail não for preenchido com @. Se esta validação for no cliente, o usuário recebe
a mensagem de e-mail inválido antes que o formulário seja enviado. A validação no
cliente melhora a interação do usuário com o site, mas é claro, que as validações no
servidor também devem ser feitas.
É importante lembrar que a validação de formulários que são submetidos ao servidor

web não depende apenas de JavaScript no lado cliente, pois não se pode assegurar que
o recurso esteja ativado e que irá funcionar corretamente em todos os browsers.
Implementada ou não a validação em JavaScript, deve sempre haver a validação dos
dados recebidos no servidor da aplicação. O uso de validação via JavaScript cliente serve
essencialmente para facilitar a pré-validação no lado cliente, possibilitando ao usuário
ter os seus dados verificados antes que o formulário seja enviado.
Como modelo, aplique a validação dos campos no formulário no site que está sendo
desenvolvido em sala de aula.
O objetivo deste tutorial é validar o preenchimento dos campos com a verificação em

JavaScript feita após clicar no botão enviar, sendo aplicado o estilo CSS de borda
vermelha nos campos não preenchidos.
Dando início à validação

1. Crie novo arquivo JavaScript com o nome “valida_form.js” ou outro nome de sua
preferência.
2. No arquivo “fale_conosco.html” entre as tags <head>...</head>, faça o link com
o arquivo externo com o uso da tag <script src=...></script>, Figura 1.
Figura 1 – Link com arquivo JavaScript externo.

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Utilize à vontade, mas, por favor, divulgue a autoria.
www.furst.com.br – cursos@furst.com.br – alexandre.furst@prof.unibh.br

2
Inserindo o jQuery
3. No novo arquivo criado insira o código da Figura 2.
Figura 2 – jQuery para validação de preenchimento de todos os campos.
Teste o envio do formulário.
Este conteúdo foi gentilmente cedido por Fernando Faria, aluno do curso GTI – UNIBH.

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Utilize à vontade, mas, por favor, divulgue a autoria.
www.furst.com.br – cursos@furst.com.br – alexandre.furst@prof.unibh.br

Tutorial Validacao Form Jquery

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial Validacao Form Jquery

Enviado por

Direitos autorais:

Formatos disponíveis

1

A validação no cliente é necessária em várias situações: quando, por exemplo, o endereço

É importante lembrar que a validação de formulários que são submetidos ao servidor

O objetivo deste tutorial é validar o preenchimento dos campos com a verificação em

Dando início à validação

Figura 1 – Link com arquivo JavaScript externo.

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Figura 2 – jQuery para validação de preenchimento de todos os campos.

Teste o envio do formulário.

Tutorial desenvolvido pelo professor Alexandre Fürst – © Todos os direitos reservados.

Você também pode gostar