JAVASCRIPT Validao de Formulrios com jQuery- Nvel Bsico
Professor Miguel A. B. Brasil [email protected]
@miguelbbrasil1
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 que possuem dois atributos que so: action
(ao) e o method
(mtodo que pode ser GET ou POST).
3
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.
5
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
.
6
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.
7
Sintaxe de uma validaoMtodo principal Atributo name Regras
Propriedade: Valor
Mensagens
8
Exerccio
9
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
o
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-validate25
Contato
Contatos:
[email protected];
[email protected];
26
