Você está na página 1de 26

JAVASCRIPT Validao de Formulrios com jQuery

- Nvel Bsico Professor Miguel A. B. Brasil miguelbbrasil@hotmail.com @miguelbbrasil


1

Tpicos a ser abordados


O que so formulrios; Validao de Campos de texto; Validao de Email; Validao de URL; Validao de Data: Tamanho mn/max de caracteres; Tipo de dgitos.
2

Relembrando: O que so Formulrios?


Formulrios eletrnicos so elementos HTML do tipo <form> que possuem dois atributos que so: action (ao) e o method

(mtodo que pode ser GET ou POST).

O que o Plugin Validate?


Como plugins sabemos para o jQuery as possui mais diversos diferentes

realizar

interaes com o navegador do usurio. O Validate mais um plugin para o jQuery que permite que voc possa centralizar todas as validaes de dados no formulrio, tanto no cliente como no servidor. Nesta aula nosso objetivo ser tratar das validaes no lado do cliente (client side) somente.
4

Baixando o Plugin Validate


Antes de sair validando seus formulrios necessrio realizar o download do plugin como foi realizado com o core do jQuery. Para isso basta acessar o seguinte link: http://plugins.jquery.com/project/validate E clicar em downloads.

Como instalar o plugin jQuery validate


Lembre-se: O jQuery validade nada mais do que um arquivo javascript (com extenso js), portanto para instal-lo em suas pginas basta utilizar tambm a tag <script>.

Como funciona
Basicamente o plugin validate divide-se em :
Regras (rules): regras de validao; Mensagens (messages): Mensagens que sero disparadas quando as regras forem executadas;

Cada regra e/ou mensagem composta pelo atributo name que deve ser validado e este deve conter os seguintes subatributos que funcionaro da seguinte forma:
required: No pode ser deixado em branco. True para obrigatrio e false para no obrigatrio. email: Valida E-mail. url: Valida um endereo de um site. date: Valida uma data. number: Valida que o valor informado seja numrico. minlength: Valida o nmero minimo de caracteres. maxlength: Valida o nmero mximo de caracteres.

Sintaxe de uma validao


Mtodo principal Atributo name Regras Propriedade: Valor

Mensagens

Exerccio

10

Como deve ficar...

11

Iniciando as validaes
Primeiramente validar:
Campos de texto; Email; URL; Data: Tamanho mnimo de caracteres; Tamanho mximo de caracteres; Tipo de dgitos.
12

vamos

definir

que

iremos

Propriedades de validao required


Faz com que o elemento sempre seja requerido. Exemplo de cdigo:

13

Propriedades de validao minlength


Faz com que o elemento requerido sempre tenha um tamanho mnimo. Exemplo de cdigo:

14

Propriedades de validao maxlength


Faz com que o elemento requerido sempre tenha um tamanho mximo. Exemplo de cdigo:

15

Propriedades de validao rangelength


Faz com que o elemento requerido sempre tenha um tamanho mnimo e mximo dentro do range informado. Exemplo de cdigo:

16

Propriedades de validao email


Valida se o elemento requerido um email vlido ou no. Exemplo de cdigo:

17

Propriedades de validao url


Valida se o elemento requerido uma URL vlida ou no. Exemplo de cdigo:

18

Propriedades de validao date


Valida se o elemento requerido um email vlido ou no. Exemplo de cdigo:

19

Propriedades de validao number


Valida se o elemento requerido um nmero vlido ou no. Exemplo de cdigo:

20

Propriedades de validao digits


Valida se o elemento requerido um dgito vlido ou no. Exemplo de cdigo:

21

Propriedades de validao creditcard


Valida se o elemento requerido um nmero de carto de crdito vlido ou no. Exemplo de cdigo:

22

Propriedades de validao equalTo


Valida se o elemento requerido igual a outro nmero requerido. Exemplo de cdigo:

23

Mais informaes, mtodos e propriedades


Na documentao da biblioteca jQuery validate. Disponvel em:

http://docs.jquery.com/Plugins/Validation

24

Crditos

http://docs.jquery.com/Plugins/Validation/ Methods Livro jQuery A biblioteca do programador JavaScript. Autor: Maurcio Samy Silva. http://www.alexandremagno.net/blog/2008 /07/23/validando-formularios-com-oplugin-validate
25

Contato

Contatos:

miguelbbrasil@hotmail.com; miguelbrasil@svs.iffarroupilha.edu.br;

26