Observação:

Os widgets do Spry foram substituídos pelos widgets do jQuery no Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do Spry existentes na página, você não pode adicionar novos.

Sobre o widget Área de texto de validação

O widget Área de Texto de validação do Spry é uma área de texto que exibe estados válidos e inválidos quando o usuário insere algum tipo de texto. Se a área de texto for um campo obrigatório e o usuário não inserir texto, o widget retornará uma mensagem informando que é necessário inserir um valor.

Este exemplo mostra um widget Área de texto de validação em vários estados:

Um widget Área de texto de validação em vários estados
Um widget Área de texto de validação em vários estados

A. Contador de caracteres restantes B. Widget Área de texto em foco, estado número máximo de caracteres C. Widget Área de texto em foco, estado válido D. Widget Área de texto, estado obrigatório E. Contador de caracteres digitados 

O widget Área de texto de validação inclui inúmeros estados (por exemplo, válido, inválido, estado obrigatório e assim por diante). Você pode alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validação desejados. Um widget Área de texto de validação pode validar em vários pontos; por exemplo, quando o usuário clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulário.

Estado inicial

O estado do widget quando a página é carregada no navegador ou quando o usuário redefine o formulário.

Estado de foco

O estado do widget quando o usuário coloca o ponto de inserção no widget.

Estado válido

O estado do widget depois que o usuário insere informações corretamente e o formulário pode ser enviado.

Estado obrigatório

O estado do widget quando o usuário não insere qualquer texto.

Estado Número mínimo de caracteres

O estado do widget quando o usuário insere menos caracteres do que o número mínimo de caracteres obrigatório na área de texto.

Estado Número máximo de caracteres

O estado do widget quando o usuário insere mais caracteres do que o número máximo de caracteres permitido na área de texto.

Sempre que um widget Área de texto de validação entra em um desses estados por meio de interação do usuário, a lógica da estrutura do Spry aplica uma classe CSS específica ao recipiente HTML do widget em runtime. Por exemplo, se um usuário tentar enviar um formulário mas não inserir texto em uma área de texto obrigatória, o Spry aplicará uma classe ao widget que provocará a exibição da mensagem de erro “Um valor é necessário.” As regras que controlam o estilo e os estados de exibição das mensagens de erro estão no arquivo CSS que acompanha o widget, SpryValidationTextArea.css.

O HTML padrão do widget Área de texto de validação, em geral dentro de um formulário, consiste em uma tag <span> de recipiente que fica em volta da tag <textarea> do campo de texto. O HTML do widget Área de texto de validação também inclui tags de script no cabeçalho do documento e após o markup HTML do widget.

Para obter uma explicação mais abrangente de como o widget Área de texto de validação funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_sprytextarea_br.

Inserir e editar o widget Área de texto de validação

Inserir o widget Área de texto de validação

  1. Selecione Inserir > Spry > Área de texto de validação do Spry.
  2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK.

Observação:

Para inserir um widget Área de texto de validação, você também pode usar a categoria Spry no painel Inserir.

Especificar quando a validação ocorre

Você pode definir o ponto em que ocorre a validação: quando o usuário clica fora do widget, quando ele digita ou quando ele tenta enviar o formulário.

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Validar em que indica quando a validação deve ocorrer. Você pode selecionar todas as opções ou somente Enviar.

    Desfocar

    Valida sempre que o usuário clica fora do campo de texto.

    Alterar

    Valida quando o usuário altera o texto do campo de texto.

    Enviar

    Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada.

Especificar um número mínimo e máximo de caracteres

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), insira um número na caixa Caracteres (mín.) ou Caracteres (máx.). Por exemplo, se você inserir 20 na caixa Caracteres (mín.), o widget validará apenas se o usuário inserir 20 ou mais caracteres na área de texto.

Adicionar um contador de caracteres

Você pode adicionar um contador de caracteres que permita aos usuários saber quantos caracteres eles digitaram ou o número de caracteres restantes durante a inserção de texto. Por padrão, quando você adiciona um contador de caracteres, o contador aparece fora do canto inferior direito do widget.

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Contagem de caracteres ou Caracteres restantes.

    Observação:

    A opção Caracteres restantes só fica disponível se você define um número máximo de caracteres permitidos.

Exibir estados do widget na Visualização de design

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido.

Alterar o status obrigatório de uma área de texto

Por padrão, todos os widgets Área de texto de validação inseridos com o Dreamweaver requerem a entrada do usuário quando publicados em uma página da Web. Entretanto, você pode criar áreas de texto opcionais para validação.

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Obrigatório de acordo com a sua preferência.

Criar uma dica para uma área de texto

Você pode adicionar uma dica à área de texto (por exemplo, “Digite a descrição aqui”) para que os usuários saibam o tipo de informação que eles devem inserir na área de texto. A área de texto exibe o texto da dica quando o usuário carrega a página no navegador.

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), insira uma dica na caixa de texto Dica.

Bloquear caracteres extras

Você pode impedir que os usuários insiram mais caracteres do que o número máximo permitido no widget Área de texto de validação. Por exemplo, se você selecionar essa opção para um widget definido para não aceitar mais de 20 caracteres, o usuário não poderá digitar mais de 20 caracteres na área de texto.

  1. Selecione um widget Área de texto de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Bloquear caracteres extras.

Personalizar o widget Área de texto de validação

Embora o Inspetor de propriedades permita que você faça edições simples em um widget Área de texto de validação, ele não aceita tarefas de estilização personalizadas. Você pode alterar o CSS do widget Área de texto de validação para poder criar um widget que tenha o estilo de sua preferência. Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn_dw_sprytextarea_custom_br.

Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationTextArea.css. O Dreamweaver salva o arquivo SpryValidationTextArea.css na pasta SpryAssets do seu site sempre que você cria um widget Área de texto de validação do Spry. A consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget.

Observação:

Embora você possa facilmente editar regras para o widget Área de texto de validação diretamente no arquivo CSS relacionado, você também pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do widget, especialmente se você usar o modo Atual do painel.

Estilo do texto das mensagens de erro do widget Área de texto de validação

Por padrão, as mensagens de erro do widget Área de texto de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto.

  1. Para alterar o estilo do texto de mensagens de erro de um widget Área de texto de validação, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar seus próprios valores e propriedades de estilo do texto:

    Texto a ser alterado

    Regra de CSS relevante

    Propriedades relevantes a alterar

    Texto da mensagem de erro

    .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

Alterar as cores de fundo do widget Área de texto de validação

  1. Para alterar as cores de fundo do widget Área de texto de validação em vários estados, use esta tabela para localizar a regra de CSS apropriada e alterar os valores da cor de fundo padrão:

    Cor de fundo a alterar

    Regra de CSS relevante

    Propriedade relevante a alterar

    Cor de fundo do widget em estado válido

    .textareaValidState textarea, textarea.textareaValidState

    background-color: #B8F5B1;

    Cor de fundo do widget em estado inválido

    textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

    background-color: #FF9F9F;

    Cor de fundo quando o widget está em foco

    .textareaFocusState textarea, textarea.textareaFocusState

    background-color: #FFFFCC;

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online