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.
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:
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 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.
Observação:
Para inserir um widget Caixa de seleção de validação, você também pode usar a categoria Spry no painel Inserir.
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.
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.
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.
-
-
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.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.