Revista PHP / Java Script
Carlos Silva
Desenvolvedor web, certificado ISPA CYCLADES e Macromedia. Desenvolvedor usando as tecnologias C#, JSP, PHP, JavaScript, XML, ABAP, Tableless e outros. Certificado em Segurança da Informação e atualmente trabalhando com ativos de Rede Cisco.
Validação de formulário com o framework Spry
Bom amigos,
Atendendo a alguns pedidos esse artigo tem como objetivo mostrar um simples formulário com validação utilizando nosso novo framework Spry.
É requerido para esse artigo o Dreamwever CS3 e o Spry Framework para Ajax 1.6.
Faça o download da Spry Update Extension for Dreamweaver CS3 ou baixe-a através do Adobe Labs.
Após a instalação feche o DW e abra novamente que uma janela será exibida como mostra a imagem abaixo.
Clique em OK
Ao abrir o DW selecione o menu Site como mostra a imagem abaixo
Acessado a opção acima teremos uma nova janela do Spry Updater como mostra abaixo, marque todas e clique em Update.
Após atualidado feche e abra o DW por garantia para evitar problemas posteriores.
1º Crie um novo arquivo para criarmos nosso form com validação, para fim de melhor entendimento eu vou criar um arquivo com nome de 1.php.
Repare que não temos apenas o arquivo simples default gerado pelo DW.
Vamos trabalhar somente com a parte de validação que é está parte destacada acima, ao passar o mouse sobre cada opção indicará para qual tipo de campo é determinada validação. Nesse artigo vamos trabalhar com 2 tipos que são os textbox e o textarea.
Coloque o cursor dentro da tabela ao lado do nome para incluir um text fied clicando na primeira opção da área marcada na imagem acima e ao abrir uma janela clique apenas em OK.
Após isso teremos o seguinte resultado mostrado na imagem abaixo.
Vamos fazer o mesmo passo para e-mail e assunto, e para a opção mensagem clicamos na última opção da barra de ferramentas marcadas na imagem mais acima, a opção textarea. Logo teremos o resultado abaixo.
Ao tentar salvar o arquivo ele vai mostrar uma janela como a imagem abaixo dizendo que alguns arquivos são necessários, clique em OK e será criado a pasta com os arquivos automaticamente, repare que foi criado 2 arquivos para cada tipo, ou seja um JS e um CSS para o textfied, e um JS e CSS para o Textarea.
Se tiver usando Listmenu, checkbox, será criado mais 2 arquivos para cada um tipo de input do formulário.
3° Antes de começar a validação vamos nomear os campos certinhos e definiro tamando que você achar melhor. E após feito esse passo, vamos começar nossa validação.
4° Clique no campo nome e a opção azul vai aparecer, clique na opção azul que a barra de propriedades irá mostrar as opção de validação para tipo de campo.
A imagem abaixo mostra algumas opções de validação
Repare que está definido com Required para os campos. Abaixo de Preview states temos a ação na qual queremos que seja feita a validação, normalmente deixo no submit mesmo. Para a opção Type temos as seguintes opções
Agora é só escolher a melhor opção para cada campo atendendo as suas necessidades claro. A opção Type nesse artigo eu só vou usar para o campo email.
Mas para o campo nome vamos colocar Min Chars = 3 e Max Chars = 50.
Se for reparar assim que colocar Min Chars = 3 o para o campo nome a opção em vermelho com a mensagem em inglês, basta editar a seu gosto, Isso é válido também parar quando for incluir o Max Chars = 50. no campo nome.
Faça o mesmo processo para o campo assunto e para o campo e-mail, porem para o campo e-mail não esqueça de selecionar o Type dele para e-mail.
Para o campo TextArea temos umas opções bem legais como mostra a imagem abaixo.
Temos a opção além de definirmos o número min e max de caracteres ainda podemos marcar as opções:
que foi o número máximo de caracteres que eu defini nesse artigo.
1º Visualizando o formulário
2º Tentando enviar o formulário sem preencher nada
3º Tentando enviar com apenas nome
4º Tentando enviar com campos inválidos de e-mail e com número mínimo de caracter
5º E por fim tentando enviar com número de caracter inválido visto que o mínimo seria 5
Repare que os campos válidos vão ficando verdes e que o contador que era 100 foi para 98 após digitarmos a palavra oi no
campo de mensagem.
Bom pessoal, o objetivo era esse mesmo, fazer uma validação mais agradável do que aqueles alerts na tela.
Abs
Carlos
Atendendo a alguns pedidos esse artigo tem como objetivo mostrar um simples formulário com validação utilizando nosso novo framework Spry.
É requerido para esse artigo o Dreamwever CS3 e o Spry Framework para Ajax 1.6.
Faça o download da Spry Update Extension for Dreamweaver CS3 ou baixe-a através do Adobe Labs.
Após a instalação feche o DW e abra novamente que uma janela será exibida como mostra a imagem abaixo.
Clique em OK
Ao abrir o DW selecione o menu Site como mostra a imagem abaixo
Acessado a opção acima teremos uma nova janela do Spry Updater como mostra abaixo, marque todas e clique em Update.
Após atualidado feche e abra o DW por garantia para evitar problemas posteriores.
1º Crie um novo arquivo para criarmos nosso form com validação, para fim de melhor entendimento eu vou criar um arquivo com nome de 1.php.
Repare que não temos apenas o arquivo simples default gerado pelo DW.
Depois de incluir o formulário com uma tabela para incluir os campos temos o código abaixoPHP
PHP
Visualmente na aba Design do DW temos uma tela conforme abaixo. Repare que só inclui o button enviar.
2° Agora vamos selecionar a opção Spry como mostro na imagem abaixo.
Vamos trabalhar somente com a parte de validação que é está parte destacada acima, ao passar o mouse sobre cada opção indicará para qual tipo de campo é determinada validação. Nesse artigo vamos trabalhar com 2 tipos que são os textbox e o textarea.
Coloque o cursor dentro da tabela ao lado do nome para incluir um text fied clicando na primeira opção da área marcada na imagem acima e ao abrir uma janela clique apenas em OK.
Após isso teremos o seguinte resultado mostrado na imagem abaixo.
Vamos fazer o mesmo passo para e-mail e assunto, e para a opção mensagem clicamos na última opção da barra de ferramentas marcadas na imagem mais acima, a opção textarea. Logo teremos o resultado abaixo.
Ao tentar salvar o arquivo ele vai mostrar uma janela como a imagem abaixo dizendo que alguns arquivos são necessários, clique em OK e será criado a pasta com os arquivos automaticamente, repare que foi criado 2 arquivos para cada tipo, ou seja um JS e um CSS para o textfied, e um JS e CSS para o Textarea.
Se tiver usando Listmenu, checkbox, será criado mais 2 arquivos para cada um tipo de input do formulário.
3° Antes de começar a validação vamos nomear os campos certinhos e definiro tamando que você achar melhor. E após feito esse passo, vamos começar nossa validação.
4° Clique no campo nome e a opção azul vai aparecer, clique na opção azul que a barra de propriedades irá mostrar as opção de validação para tipo de campo.
A imagem abaixo mostra algumas opções de validação
Repare que está definido com Required para os campos. Abaixo de Preview states temos a ação na qual queremos que seja feita a validação, normalmente deixo no submit mesmo. Para a opção Type temos as seguintes opções
Agora é só escolher a melhor opção para cada campo atendendo as suas necessidades claro. A opção Type nesse artigo eu só vou usar para o campo email.
Mas para o campo nome vamos colocar Min Chars = 3 e Max Chars = 50.
Se for reparar assim que colocar Min Chars = 3 o para o campo nome a opção em vermelho com a mensagem em inglês, basta editar a seu gosto, Isso é válido também parar quando for incluir o Max Chars = 50. no campo nome.
Faça o mesmo processo para o campo assunto e para o campo e-mail, porem para o campo e-mail não esqueça de selecionar o Type dele para e-mail.
Para o campo TextArea temos umas opções bem legais como mostra a imagem abaixo.
Temos a opção além de definirmos o número min e max de caracteres ainda podemos marcar as opções:
- Char Count: A medida que vai digitando vai mostrando um contador de caracteres ao lado.
- Chars remaining: Após definirmos o número máximo de caracteres essa opção é habilitada e a contagem será decrescente até você poder marcar o block extra charcteres.
que foi o número máximo de caracteres que eu defini nesse artigo.
1º Visualizando o formulário
2º Tentando enviar o formulário sem preencher nada
3º Tentando enviar com apenas nome
4º Tentando enviar com campos inválidos de e-mail e com número mínimo de caracter
5º E por fim tentando enviar com número de caracter inválido visto que o mínimo seria 5
Repare que os campos válidos vão ficando verdes e que o contador que era 100 foi para 98 após digitarmos a palavra oi no
campo de mensagem.
Bom pessoal, o objetivo era esse mesmo, fazer uma validação mais agradável do que aqueles alerts na tela.
Abs
Carlos
Opções de Interação
Comentários
Ótimo
Por: Esther,
18/12/2008 12:21:11
Olá Carlos!
Muito bom seu artigo!!
Tenho uma dúvida.
No formulário q estou criando tem “Data de Entrada” e “Data de Saída”. Como faço p/ não permitir q a Data de entrada seja maior q a de saída?
[]s
Muito bom seu artigo!!
Tenho uma dúvida.
No formulário q estou criando tem “Data de Entrada” e “Data de Saída”. Como faço p/ não permitir q a Data de entrada seja maior q a de saída?
[]s
Legal
Por: Luis,
29/02/2008 09:33:12
muito bom isso...
mas como faz pra ENVIAR o e-mail? to me batendo aqui
mas como faz pra ENVIAR o e-mail? to me batendo aqui