anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Validação de campos de formulário com Dreamweaver

Capa

Trabalhar com formulários é uma das partes mais importantes do web design. Afinal, praticamente todo site que você fizer vai precisar de uma página que contenha uma sessão onde o usuário deve preencher seus dados, seja para dar sugestões, fazer observações, solicitar algo ou somente para fins de cadastro. E todos nós sabemos que nem sempre o usuário irá preencher os campos do modo como você deseja, certo? Por isso, é comum criarmos regras de validação para o preenchimento desses campos, com avisos e dicas para que as informações que serão enviadas estejam no formato correto.

No entanto, se você é um web designer iniciante e ainda não tem conhecimento das técnicas para fazer essa validações (comumente feitas em JavaScript e CSS, por exemplo), saiba que o Dreamweaver possui uma ferramenta muito prática e útil, que o auxiliará na criação de validações para os campos de seus formulários de maneira rápida e simples. E o Blog do web Design vai te ajudar nessa tarefa e mostrar como realmente esse método de trabalho é muito intuitivo e prático para quem está começando.

As ferramentas de SPRY do Dreamweaver

Se você já trabalha com o Dreamweaver e é minimamente curioso, já percebeu que o programa conta com uma guia de ferramentas SPRY em sua barra de ferramentas (lembramos que para que essa barra esteja visível, é necessário que você esteja no modo de visualização CLÁSSICO, como se vê na figura a seguir):

MODO CLÁSSICO DE VISUALIZAÇÃO no DREAMWEAVER

Os SPRY são frameworks no formato de bibliotecas que contém trechos de códigos e arquivos de Java Script e CSS. Através desses frameworks os profissionais de Design e de Programação necessitam apenas de conhecimentos básicos para a criação de determinados recursos, uma vez que praticamente todo o trabalho de configuração é feito pelo Dreamweaver. Nos SPRY, cada um dos arquivos criados desempenha um papel específico: os arquivos Java Script, por exemplo, são os responsáveis pela interatividade que o recurso proporciona à página e os arquivos CSS são responsáveis em estilizar visualmente o recurso produzido.

Do que você vai precisar para testar esse recurso?

Você vai precisar do Adobe Dreamweaver, é claro. Em especial a versão CS4 ou posterior, já que em versões anteriores esse recurso inexiste. E vai precisar de um formulário também, já que não será possível mostrar os recursos de validação se não tivermos um, certo?

Para facilitar sua vida, vamos mostrar como fazer as duas coisas: o formulário e a validação.

Abra o programa e na tela de abertura escolha a opção Criar Novo > Documento em HTML:

TELA DE ABERTURA DO DREAMWEAVER

Escolha o MODO DESIGN de visualização:

MODO DESIGN

Em seguida, começaremos a criação de nosso formulário. Para isso iremos utilizar a guia “Formulário”, presente na barra de ferramentas do programa:

GUIA FORMULÁRIOS no dreamweaver

Para iniciar a criação do Formulário, devemos clicar na primeira opção da guia, também chamada “Formulário”. Ao clicar nessa ferramenta, irá aparecer uma linha pontilhada vermelha em nosso documento. Ela indica a área de atuação de nosso formulário e portanto devemos inserir todos os campos que criaremos a seguir dentro desse espaço ( e se olhar na parte de código, verá que ela inseriu a as tags <form> e </form>, que abrem e fecham uma área de formulário). Na sequência, clique na SEGUNDA opção de ferramenta da guia, chamada “Campo de Texto”:

INSERINDO CAMPO DE TEXTO NO DREAMWEAVER

 

Uma janela de atributos da tag Input que você está inserindo irá abrir e nela você deve preencher os seguintes atributos:

  • ID (que é como o campo será identificado dentro do formulário e não aparecerá na tela)
  • RÓTULO (que é a palavra que aparece antes do campo e indica ao usuário o que deve ser preenchido, essa palavra estará visível no navegador). O restante das opções pode deixar como na figura abaixo:

JANELA DE ATRIBUTOS DE ACESSO NO DREAMWEAVER

 

Assim que clicar em OK, um campo de preenchimento de texto de formulário irá aparecer no documento. Ele não vem configurado, por isso devemos clicar nesse campo selecionando-o e, na Barra de Propriedades do Dreamweaver, informar seus atributos básicos, a saber:

  • Largura em caracteres: o tamanho que o campo deve ter, quantos caracteres visíveis ele irá comportar;
  • Caracteres (máx.): quantos caracteres o usuário pode preencher dentro deste campo. É imprescindível controlar também esse atributo.

PAINEL DE PROPRIEDADES DO DREAMWEAVER

 

No meu caso, preenchi com 50 caracteres nos 2 campos, mas você poderá colocar a quantidade que desejar…

Agora, repita esse mesmo passo para incluir a linha de Endereço:

JANELA DE ATRIBUTOS DE ACESSO NO DREAMWEAVER 02

Nosso formulário será bem simples, o que está sendo proposto aqui é como fazer a validação desses campos, então não me preocuparei em formatar com CSS ou criar uma grande quantidade de detalhes. Você poderá fazê-lo se desejar. Nesse modelo que proponho, nosso formulário terá os seguintes campos:

  • Nome;
  • Endereço;
  • E-mail;
  • Telefone residencial;
  • Cidade;
  • CEP;
  • Observações. 

Portanto, o que você deverá fazer é uma repetição dos passos acima até chegarmos no campo de “Observações“, que será diferente pois necessita comportar mais caracteres e por isso terá mais linhas. Para inserí-lo, clique na quarta ferramenta da Guia Formulário, chamada “Área de Texto”:

CAMPO DE COMENTÁRIO

Formate-o nas opções da Barra de Propriedades na parte inferior do Programa, o resultado de seu trabalho deve ser parecido com a figura a seguir:

FORMULARIO PRONTO

 

Nosso formulário está pronto! Agora, iremos iniciar a parte de validação com as ferramentas de SPRY do Dreamweaver, indicando que campos devem ser obrigatoriamente preenchidos e que campos possuirão regras para o preenchimento.

Para iniciarmos, clique no campo “Nome” selecionando-o, e em seguida clique na aba “SPRY” na Barra de ferramentas do programa, como se vê a seguir:

VALIDAÇÃO SPRY CAMPO NOME

Em seguida, clique na opção chamada “Validação Spry – Campo de Texto”. Uma pequena aba azul irá surgir em cima do campo, indicando que o SPRY foi aplicado nele. Na Barra de Propriedades na parte inferior do Programa, vamos encontrar algumas sugestões de validação. Pelo fato desse campo ter um preenchimento que não possui nenhuma regra específica, iremos escolher “Tipo: nenhum(a)” nas opções de validação.

OPÇÕES DE VALIDAÇÃO DE SPRY NO CAMPO NOME

 

Ao lado dessa caixa, escolheremos a opção “Necessário” dentro da caixa de Estados de Visualização. Isso fará com que, apesar de não haver nenhuma regra específica para o preenchimento do Nome, ele não deverá ficar em branco, forçando o usuário a preenche-lo. Outro detalhe importante é marcar  caixa “onBlur” na opção VALIDAR EM , pois essa função vai fazer surgir um aviso assim que a pessoa clicar FORA do campo de texto sem preenche-lo ou se preenche-lo da maneira errada.

VALIDAR EM NOME

Na sequência, veja que a mensagem de validação “Um valor é necessário” aparece ao lado do campo Nome. Você pode até modifica-la livremente, basta seleciona-la e digitar a mensagem que desejar…

MENSAGEM DE VALIDAÇÃO NO CAMPO DE NOME

 

Agora, que tal repetirmos o mesmo procedimento com o campo de Endereço? Repare que na imagem a seguir já personalizei a mensagem exibida:

MENSAGEM DE VALIDAÇÃO NO CAMPO DE ENDEREÇO

 

No campo de E-mail, repetiremos o procedimento, mas faremos uma alteração na Barra de Propriedades do Dreamweaver. Em TIPO, iremos escolher a opção “Endereço de E-mail”, e em Estado de Visualização escolha “Formato inválido”. Isso significa que se alguém tentar digitar um formato de endereço de e-mail sem o símbolo da arroba ou ponto.com no final, ele não será aceito como um endereço de e-mail verdadeiro. Não esqueça também de validar OnBlur.

OPÇÕES DE VALIDAÇÃO DE SPRY NO CAMPO EMAIL

 

No campo de Telefone, siga as configurações da imagem a seguir. Repare que existe um campo chamado FORMATO, onde você deve escolher a opção “Personalizado”. E logo abaixo, demonstre com caracteres como o campo deve ser preenchido (como se vê na imagem, utilizei (00)0000-0000 como referência para o preenchimento).

OPÇÕES DE VALIDAÇÃO DE SPRY NO CAMPO TELEFONE

 

No campo de CEP, utilizei-me do mesmo raciocínio, adaptando as informações para o formato do CEP:

OPÇÕES DE VALIDAÇÃO DE SPRY NO CAMPO CEP

 

Por fim criaremos uma validação para a caixa de texto de Observações. Não há muito a ser feito aqui, apenas iremos colocar uma limitação de caracteres (no meu caso, escolhí 300 caracteres como o máximo a ser preenchido) e um pequeno contador que irá mostrar quantas letras já foram digitadas pelo usuário. Siga as instruções nas imagens a seguir: selecione a caixa de Observações e mãos à obra:

VALIDAÇÃO SPRY CAMPO TEXTO

 

VALIDAÇÃO SPRY CAMPO ÁREA DE TEXTO

Está na hora de salvar seu formulário e testar se está tudo funcionando como se espera. Dê Control+S para salva-lo com o nome que desejar e uma pequena janela irá aparecer, indicando que o Dreamweaver está anexando ao seu trabalho os arquivos de SPRY:

JANELA DE COPIAR ARQUIVOS

 

Abra o navegador e preencha os campos (ou não, caso queira ver as mensagens de alerta). Você vai perceber que o funcionamento está perfeito, e mais: sempre que acerta a informação no formato que programou, o campo fica verde; se errar, perceba que ele fica vermelho. É o CSS do SPRY em ação modificando a propriedade do campo de acordo com o que está sendo preenchido…

FINAL

Considerações finais

Como pode perceber, essa é uma maneira prática e sem dores de cabeça para validar seus formulários no Dreamweaver. É claro que você deve continuar estudando CSS e Javascript e criar seus próprios códigos… mas de uma maneira geral, essa é uma ótima opção para quando estiver sem tempo ou se ainda não domina as técnicas para fazer as suas próprias validações.

Espero que o recurso tenha sido útil para vocês… não esqueçam de divulgar o Blog para os amigos do curso e também nas Redes Sociais. Escreva-nos contando nos comentários abaixo dizendo o que achou e faça sugestões de posts futuros. A Equipe do Blog agradece!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Manipulando cookies em ASP
Este tutorial mostrará como criar uma página em ASP que utilize Cookies de navegador para
  • Glayson Duarte

    Olá, ainda tem alguém por ai. heheheh. Bom.. tô aprendendo por aqui a fazer tipo um cadastro das pessoas assim tbm por aqui pelo dreamweaver e eu imagina que existisse algo assim nele, mas não sabia aonde. hhehehe. Bom, a minha dúvida misturada com pergunta é a seguinte: E se eu quiser deixar um campo em branco? como faz? Já que ao criar este formulário no dreamweaver, ele automaticamente manda uma mensagem tipo: “Colum ‘email’ can not be Null” se você deixar em branco.