Selecione Inserir > Spry > Grupo de botões de opção de validação do Spry.
Última atualização em
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 Grupo de botões de opção de validação
O widget Grupo de botões de opção de validação é um grupo de botões de opção com suporte de validação para a seleção. O widget força a seleção de um dos botões do grupo.
Este exemplo mostra um widget Grupo de botões de opção de validação em vários estados.
A. Mensagens de erro do widget Grupo de botões de opção de validação B. Grupo do widget Grupo de botões de opção de validação
O widget Grupo de botões de opção de validação inclui três estados além do estado inicial: válido, inválido e valor obrigatório. Você pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationRadio.css), de acordo com os resultados de validação desejados. Um widget Grupo de botões de opção de validação pode validar em diversos momentos: quando o usuário clica fora do widget, quando ele faz seleções ou quando ele tenta enviar o formulário.
Estado inicial
Quando a página é carregada no navegador ou quando o usuário redefine o formulário.
Estado válido
Quando o usuário faz uma seleção e o formulário pode ser enviado.
Estado obrigatório
Quando o usuário não faz uma seleção obrigatória.
Estado inválido
Quando o usuário seleciona um botão de opção que não tem um valor aceitável.
Sempre que um widget Grupo de botões de opçã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 que acompanha o widget, SpryValidationRadio.css.
O código HTML padrão do widget Grupo de botões de opçã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="radio" do grupo de botões de opção. O código HTML do widget Grupo de botões de opção de validação também inclui tags de script no cabeçalho do documento e após o código HTML do widget.
Para obter uma explicação mais abrangente sobre como o dispositivo Grupo de botões de opção de validação funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_spryradio_br.
Inserir e editar o widget Grupo de botões de opção de validação
Inserir o widget Grupo de botões de opção de validação
-
-
Na caixa de texto Nome, digite um nome para o grupo de botões de opção.
-
Adicione ou exclua botões de opção do grupo clicando nos botões de adição (+) ou subtração (-).
-
Na coluna Rótulo, clique no nome de cada botão de opção para tornar o campo editável e atribua nomes exclusivos a cada botão.
-
Na coluna Valor, clique em cada valor para tornar o campo editável e atribua um valor exclusivo a cada botão de opção.
-
(Opcional) Clique em um botão de opção ou em seu valor para selecionar uma linha específica e, em seguida, clique nas setas para cima e para baixo para mover a linha para cima ou para baixo.
-
Selecione o tipo de layout para o grupo de botões de opção.
Quebras de linha
Coloca cada botão de opção em uma linha separada usando quebras de linha (tags br).
Tabela
Coloca cada botão de opção em uma linha separada usando linhas individuais da tabela (tags tr).
-
Clique em OK.
Observação:
Para inserir um widget Grupo de botões de opçã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.
-
Selecione um widget Grupo de botões de opção de validação na janela Documento, clicando em sua aba azul.
-
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 grupo de botões de opçã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.
Exibir estados do widget na Visualização de design
-
Selecione um widget Grupo de botões de opção de validação na janela Documento, clicando em sua aba azul.
-
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.
Alterar o status obrigatório dos botões de opção
Por padrão, os widgets Grupo de botões de opção de validação exigem que o usuário faça uma seleção antes de enviar o formulário. Entretanto, você pode fazer seleções opcionais para o usuário.
-
Selecione um widget Grupo de botões de opção de validação na janela Documento, clicando em sua aba azul.
-
No Inspetor de propriedades (Janela > Propriedades), desmarque a opção Obrigatório.
Especificar um valor vazio ou inválido
Você pode especificar um valor que será registrado como vazio ou inválido se o usuário selecionar um botão de opção associado a um desses valores. Se o usuário selecionar um botão de opção com um valor vazio, o navegador retornará a mensagem de erro "Faça uma seleção". Se o usuário selecionar um botão de opção com um valor inválido, o navegador retornará a mensagem de erro "Selecione um valor válido".
-
No widget Grupo de botões de opção, selecione o botão que deseja usar para o botão vazio ou inválido. Ao especificar valores vazios ou inválidos para o widget, devem existir botões de opção correspondentes com esses valores já atribuídos.
-
No Inspetor de propriedades (Janela > Propriedades) do widget, atribua ao botão de opção um valor marcado. Para criar um botão de opção com um valor vazio, digite none na caixa de texto Valor marcado. Para criar um botão de opção com um valor inválido, digite invalid na caixa de texto Valor marcado.
-
Selecione o widget Grupo de botões de opção de validação inteiro clicando na aba azul.
-
No Inspetor de propriedades, especifique os valores vazios ou inválidos. Para criar um widget que exibe a mensagem de erro de valor vazio "Faça uma seleção", digite none na caixa de texto Valor vazio. Para criar um widget que exibe a mensagem de erro de valor inválido "Selecione um valor válido", digite invalid na caixa de texto Valor inválido.
O botão de opção propriamente dito e o widget Grupo de botões de opção devem ter os valores none ou invalid atribuídos para que as mensagens de erro sejam exibidas corretamente.
Personalizar o widget Grupo de botões de opção
Embora o Inspetor de propriedades permita que você faça edições simples em um widget Grupo de botões de opção de validação, ele não aceita tarefas de estilização personalizadas. Você pode alterar o CSS do widget Grupo de botões de opçã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_spryradio_custom_br.
Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationRadio.css. O Dreamweaver salva o arquivo SpryValidationRadio.css na pasta SpryAssets do seu site sempre que você cria um widget Grupo de botões de opçã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 seja possível editar facilmente as regras para o widget Grupo de botões de opçã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 Grupo de botões de opção de validação (instruções gerais)
-
Abra o arquivo SpryValidationRadio.css.
-
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 Grupo de botões de opção, edite a regra radioRequiredState no arquivo SpryValidationRadio.css.
-
Faça alterações na regra CSS e salve o arquivo.
O arquivo SpryValidationRadio.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 Grupo de botões de opção de validação
Por padrão, as mensagens de erro do widget Grupo de botões de opção de validação aparecem em vermelho com uma borda sólida de 1 pixel em torno do texto.
-
Para alterar o estilo do texto de um widget Grupo de botões de opçã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 no qual aplicar o estilo
Regra de CSS relevante
Propriedades relevantes a alterar
Texto da mensagem de erro
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Artigos relacionados
Fazer logon em sua conta