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 Confirmação de validação

O widget Confirmação de validação é um campo de texto ou um campo de formulário de senha que exibe estados válidos ou inválidos quando o usuário insere um valor que não corresponde ao valor de um campo similar no mesmo formulário. Por exemplo, você pode adicionar um widget Confirmação de validação a um formulário que exige que o usuário digite novamente a senha especificada em um campo anterior. Se o usuário não digitar a senha exatamente conforme especificado antes, o widget retornará uma mensagem de erro informando que os valores não coincidem.

Você também pode usar o widget Confirmação de validação em conjunto com um widget Campo de texto de validação para validar endereços de email.

Observação:

Familiarize-se com os widgets de validação do Spry antes de trabalhar com o widget Confirmação. Se você não estiver familiarizado com eles, consulte Trabalho com o widget Campo de texto de validação do Spry ou qualquer uma das outras visões gerais do widget de validação antes de continuar. Esta visão geral não apresenta todos os conceitos básicos do widget de validação.

A ilustração a seguir mostra uma configuração típica do widget Confirmação:

Campo de senha
A. Um campo de senha ou o widget Validação de senha do Spry B. Widget Confirmação 

O widget Confirmação de validação inclui inúmeros estados (por exemplo, válido, inválido, obrigatório e assim por diante). Você pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationConfirm.css), de acordo com os resultados de validação desejados. Um widget Confirmação de validação pode validar em vários pontos; por exemplo, quando o visitante do site clica fora do widget, digita ou tenta enviar o formulário.

Estado inicial

Quando a página é carregada no navegador ou quando o usuário redefine o formulário.

Estado de foco

Quando o usuário coloca o ponto de inserção no widget.

Estado válido

Quando o usuário insere informações corretamente e o formulário pode ser enviado.

Estado inválido

Quando o usuário insere um texto que não corresponde ao inserido em um campo de texto anterior, no widget Campo de texto de validação ou no widget Senha de validação.

Estado obrigatório

Quando o usuário não insere texto obrigatório no campo de texto.

Para obter uma explicação abrangente sobre como os widgets Confirmação de validação funcionam, bem como informações adicionais sobre a estrutura do widget, consulte www.adobe.com/go/learn_dw_spryconfirm_br.

Inserir e editar o widget Confirmação de validação

Inserir o widget Confirmação de validação

  1. Selecione Inserir > Spry > Confirmação 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 Confirmação de validação, você também pode usar a categoria Spry no painel Inserir.

Alterar o status obrigatório de um widget Confirmação de validação

Por padrão, todos os widgets Confirmação de validação inseridos com o Dreamweaver requerem entrada do usuário quando publicados em uma página da Web. Contudo, você pode determinar que o preenchimento dos campos de texto de confirmação pelo usuário seja opcional.

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

Especificar o campo de texto a ser validado

  1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione o campo de texto em relação ao qual deseja fazer a validação, selecionando um campo de texto no menu pop-up Validar em relação a. Todos os campos de texto com IDs exclusivas atribuídas a eles são exibidos como opções no menu pop-up.

Exibir estados do widget na Visualização de design

  1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul.
  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.

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.

  1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul.
  2. 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 de confirmação.

    Alterar

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

    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.

Personalizar o widget Confirmação

Embora o Inspetor de propriedades permita que você faça edições simples em um widget Confirmação de validação, ele não aceita tarefas de estilização personalizadas. Você pode alterar o CSS do widget Confirmação de validação para 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_spryconfirm_custom_br.

Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationConfirm.css. O Dreamweaver salva o arquivo SpryValidationConfirm.css na pasta SpryAssets do seu site sempre que você cria um widget Confirmação 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 Confirmação 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 widget Confirmação de validação (instruções gerais)

  1. Abra o arquivo SpryValidationConfirm.css.

  2. Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado obrigatório do widget Confirmação, edite a regra input.confirmRequiredState no arquivo SpryValidationConfirm.css.

  3. Faça alterações no CSS e salve o arquivo.

O arquivo SpryValidationConfirm.css contém comentários extensos, a explicação do código e a finalidade de determinadas regras. Para obter mais informações, consulte os comentários no arquivo.

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

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

  1. Para alterar o estilo do texto de um widget Confirmação de validação, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar suas propriedades e valores de estilo de texto.

    Texto a ser alterado

    Regra de CSS relevante

    Propriedades relevantes a alterar

    Texto da mensagem de erro

    .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg

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

Alterar as cores de fundo do widget Confirmação de validação

  1. Para alterar as cores de fundo do widget Confirmação 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

    .confirmValidState input, input.confirmValidState

    background-color: #B8F5B1;

    Cor de fundo do widget em estado inválido

    input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input

    background-color: #FF9F9F;

    Cor de fundo quando o widget está em foco

    .confirmFocusState input, input.confirmFocusState

    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