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

O widget Caixa de seleção de validação é uma caixa de seleção ou um grupo de caixas de seleção em formato HTML que exibe estados válidos e inválidos quando o usuário marca ou não marca uma caixa de seleção. Por exemplo, você pode adicionar um widget Caixa de seleção de validação a um formulário no qual o usuário precisa fazer três seleções. Se o usuário não fizer as três seleções, o widget retornará uma mensagem informando que o número mínimo de seleções não foi cumprido.

Este exemplo mostra um widget Caixa de seleção de validação em vários estados:

Widget Caixa de seleção de validação em vários estados
Widget Caixa de seleção de validação em vários estados

A. Grupo de widgets Caixa de seleção de validação, estado número mínimo de seleções B. Widget Caixa de seleção de validação, estado obrigatório 

O widget Caixa de seleção de validação inclui inúmeros estados (por exemplo, válido, inválido, valor 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 Caixa de seleção de validação pode validar em vários pontos; por exemplo, quando o usuário clica fora do widget, quando ele faz seleções 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 válido

O estado do widget depois que o usuário faz uma seleção ou corrige inúmeras seleções, e o formulário pode ser enviado.

Estado obrigatório

O estado do widget quando o usuário não faz uma seleção obrigatória.

Estado Número mínimo de seleções

O estado do widget quando o usuário marca menos caixas de seleção do que o número mínimo obrigatório.

Estado Número máximo de seleções

O estado do widget quando o usuário marca mais caixas de seleção do que o número máximo obrigatório.

Sempre que um widget Caixa de seleção 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 fizer seleções, o Spry aplicará uma classe ao widget que provocará a exibição da mensagem de erro “Faça uma seleção.” 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, SpryValidationCheckbox.css.

O HTML padrão do widget Caixa de seleção de validação, em geral dentro de um formulário, consiste em uma tag <span> de recipiente que fica em volta da tag <input type="checkbox"> da caixa de seleção. O HTML do widget Caixa de seleção 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 abrangente sobre como o widget Caixa de seleção de validação funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_sprycheckbox_br.

Inserir e editar o widget Caixa de seleção de validação

Inserir o widget Caixa de seleção de validação

  1. Selecione Inserir > Spry > Caixa de seleçã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 Caixa de seleção 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 faz seleções ou quando ele tenta enviar o formulário.

  1. Selecione um widget Caixa de seleção de validação na janela Documento.
  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 da caixa de seleção.

    Alterar

    Valida quando o usuário faz seleções.

    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 uma faixa mínima e máxima de seleções

Por padrão, um widget Caixa de seleção de validação é definido como obrigatório. No entanto, se você inserir inúmeras caixas de seleção na página, poderá especificar uma faixa mínima e máxima de seleções. Por exemplo, se você tem seis caixas de seleção dentro da tag <span> para um único widget Caixa de seleção de validação e deseja garantir que o usuário selecione ao menos três, você pode definir essa preferência para o widget inteiro.

  1. Selecione um widget Caixa de seleção de validação na janela Documento.
  2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Forçar faixa.
  3. Insira um número mínimo ou máximo (ou ambos) de caixas de seleção que o usuário deve marcar.

Exibir estados do widget na Visualização de design

  1. Selecione um widget Caixa de seleção 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, selecione Inicial para ver o widget em seu estado inicial.

Personalizar mensagens de erro do widget Caixa de seleção de validação

Por padrão, as mensagens de erro do widget Caixa de seleção de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto. Você pode alterar o CSS do widget Caixa de seleçã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_sprycheckbox_custom_br.

  1. Abra o arquivo SpryValidationCheckbox.css.

    O Dreamweaver salva o arquivo SpryValidationCheckbox.css na pasta SpryAssets do seu site sempre que você cria um widget Caixa de seleção de validação do Spry. É aconselhável consultar este arquivo, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget.

  2. Use esta 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 ao texto:

    Texto no qual aplicar o estilo

    Regra de CSS relevante

    Propriedades relevantes a alterar

    Texto da mensagem de erro

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

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

    Observação:

    Embora você possa facilmente editar regras para o widget Caixa de seleçã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.

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