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:

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.

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

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.

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

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

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

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.

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.

Exibir estados do widget na Visualização de design

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.