Selecione Inserir > Spry > Campo de texto de validação do Spry.
Última atualização em
13 de fev de 2023
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 Campo de texto de validação
Um widget Campo de texto de validação do Spry é um campo de texto que exibe estados válidos ou inválidos quando o visitante do site insere texto. Por exemplo, você pode adicionar um widget Campo de texto de validação a um formulário no qual os visitantes digitam seus endereços de email. Se eles não digitarem o símbolo “@” e um ponto no endereço de email, o widget retornará uma mensagem declarando que as informações inseridas pelo usuário são inválidas.
Este exemplo mostra um widget Campo de texto de validação em vários estados:
A. Widget Campo de texto, dica ativada B. Widget Campo de texto, estado válido C. Widget Campo de texto, estado inválido D. Widget Campo de texto, estado obrigatório
O widget Campo 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 Campo de texto de validação pode validar em vários pontos; por exemplo, quando o visitante clica fora do widget, digita ou 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 inválido
O estado do widget depois que o usuário insere texto em um formato inválido. (Por exemplo, 06 para um ano em vez de 2006).
Estado obrigatório
O estado do widget quando o usuário não insere texto obrigatório no campo de texto.
Estado Número mínimo de caracteres
O estado do widget quando o usuário insere um número de caracteres inferior ao obrigatório no campo de texto.
Estado Número máximo de caracteres
O estado do widget quando o usuário insere um número de caracteres superior ao obrigatório no campo de texto.
Estado Valor mínimo
O estado do widget quando o usuário insere um valor menor que o valor obrigatório no campo de texto. (Aplica-se a validações do tipo inteiro, real e dados.)
Estado Valor máximo
O estado do widget quando o usuário insere um valor maior que o valor máximo permitido no campo de texto. (Aplica-se a validações do tipo inteiro, real e dados.)
Sempre que um widget Campo 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 tenta enviar um formulário mas não insere texto em um campo de texto obrigatório, o Spry aplica uma classe ao widget que provoca 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, SpryValidationTextField.css.
O HTML padrão do widget Campo 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 <input> do campo de texto. O HTML do widget Campo 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 sobre como o widget Campo de texto de validação funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_sprytextfield_br.
Inserir e editar o widget Campo de texto de validação
Inserir o widget Campo de texto de validação
-
-
Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK.
Observação:
Para inserir um widget Campo de texto de validação, você também pode usar a categoria Spry no painel Inserir.
Especificar um formato e um tipo de validação
Você pode especificar diversos tipos de validação para o widget Campo de texto de validação. Por exemplo, você pode especificar um tipo de validação de cartão de crédito se o campo de texto aceitar números de cartão de crédito.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), selecione um tipo de validação no menu Tipo.
-
Se aplicável, selecione um formato no menu pop-up Formato.
Na maioria dos tipos de validação, o campo de texto deve ter um formato padrão. Por exemplo, se você aplicar o tipo de validação inteiro a um campo de texto, o widget só validará se o usuário inserir números no campo de texto. Alguns tipos de validação, no entanto, permitem que você escolha o tipo de formato aceito em seu campo de texto. Esta tabela lista os formatos e tipos de validação disponíveis no Inspetor de propriedades:
Tipo de validação |
Formato |
|---|---|
Nada |
Nenhum formato específico necessário. |
Inteiro |
O campo de texto aceita somente números. |
Endereço de email |
O campo de texto aceita endereços de email que contêm @ e um ponto (.) que sejam precedidos e seguidos por pelo menos uma letra. |
Data |
Os formatos variam. Faça a sua seleção no menu pop-up Formato do Inspetor de propriedades. |
Tempo |
Os formatos variam. Faça a sua seleção no menu pop-up Formato do Inspetor de propriedades. (“tt” representa o formato am/pm; “t” representa o formato a/p.) |
Cartão de crédito |
Os formatos variam. Faça a sua seleção no menu pop-up Formato do Inspetor de propriedades. Você pode optar por aceitar todos os cartões de crédito ou especificar determinado tipo de cartão de crédito (MasterCard, Visa e outros). O campo de texto não aceita espaços nos números do cartão de crédito. Por exemplo: 4321 3456 4567 4567. |
CEP |
Os formatos variam. Faça a sua seleção no menu pop-up Formato do Inspetor de propriedades. |
Número de telefone |
O campo de texto aceita números de telefone formatados para os Estados Unidos e o Canadá (000) 000-0000 ou formatos personalizados. Se você selecionar um formato personalizado como opção, insira o formato, por exemplo 000.00(00), na caixa de texto Padrão. |
Número do CPF |
O campo de texto aceita números de CPF formatados como 000-00-0000. Se você desejar usar um formato diferente, selecione Personalizado como seu tipo de validação e especifique um padrão. O mecanismo de validação de padrões aceita somente caracteres ASCII. |
Moeda |
O campo de texto aceita moeda formatada como 1,000,000.00 ou 1.000.000,00. |
Número real/notação científica |
Valida vários tipos de números: inteiros (por exemplo, 1); valores flutuantes (por exemplo, 12.123); e valores flutuantes em notação científica (por exemplo, 1.212e+12, 1.221e-12 onde e é usado como uma potência de 10). |
Endereço IP |
Os formatos variam. Faça a sua seleção no menu pop-up Formato do Inspetor de propriedades. |
URL |
O campo de texto aceita URLs formatados como http://xxx.xxx.xxx ou ftp://xxx.xxx.xxx. |
Personalizada |
Permite que você especifique um formato e um tipo de validação personalizado. Insira o padrão do formato (e uma dica, se quiser) no Inspetor de propriedades. O mecanismo de validação de padrões aceita somente caracteres ASCII. |
Especificar quando a validação ocorre
Você pode definir o ponto em que ocorre a validação: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta enviar o formulário.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), selecione a opção 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
Esta opção só está disponível para os tipos de validação Nenhum, Inteiro, Endereço de email e URL.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), insira um número na caixa Caracteres (mín.) ou Caracteres (máx.). Por exemplo, se você inserir 3 na caixa Caracteres (mín.), o widget validará apenas se o usuário inserir três ou mais caracteres.
Especificar valores mínimos e máximos
Esta opção está disponível apenas para os tipos de validação Inteiro, Tempo, Moeda e Número real/notação científica.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), insira um número na caixa Valor mínimo ou Valor máximo. Por exemplo, se você inserir 3 na caixa Valor mínimo, o widget validará somente se o usuário inserir o número 3 ou um valor superior (4, 5, 6 e assim por diante) no campo de texto.
Exibir estados do widget na Visualização de design
-
Selecione um widget Campo de texto de validação na janela Documento.
-
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 um campo de texto
Por padrão, todos os widgets Campo de texto de validação inseridos com o Dreamweaver requerem a entrada do usuário quando publicados em uma página da Web. Contudo, você determinar que o preenchimento dos campos de texto pelo usuário seja opcional.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
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 um campo de texto
Por haver inúmeros tipos de formatos para os campos de texto, é aconselhável colocar uma dica para que os usuários saibam qual formato devem inserir. Por exemplo, um campo de texto definido com o tipo de validação Número de telefone só aceitará números de telefone no formato (000) 000-0000. Você pode inserir essas amostras de números como uma dica para que o campo de texto exiba o formato correto quando o usuário carregar a página no navegador.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), insira uma dica na caixa de texto Dica.
Bloquear caracteres inválidos
Você pode impedir que os usuários insiram caracteres inválidos em um widget Campo de texto de validação. Por exemplo, se você selecionar essa opção para um widget definido com o tipo de validação Inteiro, nada será exibido no campo de texto se o usuário tentar digitar uma letra.
-
Selecione um widget Campo de texto de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), selecione a opção Forçar padrão.
Personalizar o widget Campo de texto de validação
Embora o Inspetor de propriedades permita que você faça edições simples em um widget Campo de texto de validação, ele não aceita tarefas de estilização personalizadas. Você pode alterar o CSS do widget Campo 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_sprytextfield_custom_br.
Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationTextField.css. O Dreamweaver salva o arquivo SpryValidationTextField.css na pasta SpryAssets do site sempre que você cria um widget Campo 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 Campo 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 Campo de texto de validação
Por padrão, as mensagens de erro do widget Campo de texto de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto.
-
Para alterar o estilo do texto de mensagem de erros de um widget Campo 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 de texto:
Texto a ser alterado
Regra de CSS relevante
Propriedades relevantes a alterar
Texto da mensagem de erro
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Alterar as cores de fundo do widget Campo de texto de validação
-
Para alterar as cores de fundo do widget Campo 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 a alterar
Regra de CSS relevante
Propriedade relevante a alterar
Cor de fundo do widget em estado válido
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
Cor de fundo do widget em estado inválido
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
Cor de fundo quando o widget está em foco
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;