Selecione Inserir > Spry > Seleção de validação do Spry.
Última atualização em
May 05, 2021 02:00:44 AM GMT
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 Seleção de validação
O widget Seleção de validação do Spry é um menu suspenso que exibe estados válidos e inválidos quando o usuário faz uma seleção. Por exemplo, você pode inserir um widget Seleção de validação que contenha uma lista de estados, agrupados em diferentes seções e divididos por linhas horizontais. Se o usuário selecionar acidentalmente uma das linhas divisórias e não um dos estados, o widget Seleção de validação retornará uma mensagem ao usuário informando que a seleção é inválida.
Este exemplo mostra um widget Seleção de validação expandido e também recolhido em vários estados:
A. Widget Seleção de validação em foco B. Widget Seleção, estado válido C. Widget Seleção, estado obrigatório D. Widget Seleção, estado inválido
O widget 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 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 de foco
O estado quando o usuário clica no widget.
Estado válido
O estado do widget depois que o usuário seleciona um item válido e o formulário pode ser enviado.
Estado inválido
O estado do widget depois que o usuário seleciona um item inválido.
Estado obrigatório
O estado do widget quando o usuário não seleciona um item válido.
Sempre que um widget 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 selecionar um item no menu, o Spry aplicará uma classe ao widget para que ele exiba a mensagem de erro “Selecione um item.” 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, SpryValidationSelect.css.
O HTML padrão do widget 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 <select> da área de texto. O HTML do widget 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 Seleção de validação funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_spryselect_br.
Inserir e editar o widget Seleção de validação
Inserir o widget Seleção de validação
-
-
Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK.
-
Na Visualização de código, adicione tags de opção que contenham valores e itens de menu. O Dreamweaver não faz isso automaticamente. Para obter mais informações, consulte o tópico anterior.
Observação:
Para inserir um widget 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 digita ou quando ele tenta enviar o formulário.
-
Selecione um widget Seleção de validação na janela Documento.
-
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 widget.
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 Seleção de validação na janela Documento.
-
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.
Proibir ou permitir valores em branco
Por padrão, todos os widgets Seleção de validação que você insere com o Dreamweaver exigem que os usuários selecionem itens de menu que tenham um valor associado quando o widget é publicado em uma página da Web. Entretanto, você pode desativar essa opção.
-
Selecione um widget Seleção de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Não permitir valores em branco, de acordo com a sua preferência.
Especificar um valor inválido
Você pode especificar um valor que será registrado como inválido se o usuário selecionar um item de menu que esteja associado a esse valor. Por exemplo, se você especificar -1 como um valor inválido e atribuir o valor a uma tag de opção, o widget retornará uma mensagem de erro se o usuário selecionar esse item de menu.
<option value="-1"> ------------------- </option>
-
Selecione um widget Seleção de validação na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), insira um número para usar como um valor inválido na caixa Valor inválido.
Personalizar o widget Seleção de validação
Embora o Inspetor de propriedades permita que você faça edições simples em um widget Seleção de validação, ele não aceita tarefas de estilização personalizadas. Você pode alterar o CSS do dispositivo Seleção de validação para criar um dispositivo que tenha o estilo de sua preferência.
Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationSelect.css. O Dreamweaver salva o arquivo SpryValidationSelect.css na pasta SpryAssets do seu site sempre que você cria um widget Seleçã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 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.
Estilo do texto das mensagens de erro do widget Seleção de validação
Por padrão, as mensagens de erro do widget Seleção de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto.
-
Para alterar o estilo do texto de mensagens de erros de um widget Seleçã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
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Alterar as cores de fundo do widget Seleção de validação
-
Para alterar as cores de fundo do widget Seleçã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 de fundo a alterar
Regra de CSS relevante
Propriedade relevante a alterar
Cor de fundo do widget em estado válido
.selectValidState select, select.selectValidState background-color: #B8F5B1;
Cor de fundo do widget em estado inválido
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
Cor de fundo quando o widget está em foco
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
Artigos relacionados
Fazer logon em sua conta