Introdução
Os validadores do ASP.Net já trazem grandes benefícios e facilidade para os desenvolvedores. Acontece que as vezes não fica muito claro para o usuário que apareça uma mensagem ao lado do campo quando um campo não está validado, seria interessante incrementar algo que desse mais destaque ao campo que não foi preenchido corretamente no formulário web.
A microsoft lançou em 2006 o pacote AjaxTollKit contendo o componente ValidatorCallout que faz essa função de melhorar a visualização dos campos não preenchidos corretamente. Mas se no seu projeto existem muitos validator e acrescentar esse componente em todos dá muito trabalho ou você não acha interessante acrescentar esse controle pois no seu processo de desenvolvimento nem sempre todos os programadores lembram de colocá-lo, trazendo um desgaste muito grande para sua equipe de teste. Este artigo mostra uma solução bem simples e interessante para personalizar o visual dos campos com preenchimento incorreto.
Explicação
Quando um webform é criado com algum validator o framework acrescenta, em tempo de execução, alguns arquivos script contendo vários códigos para sustentar essa validação, geralmente alocando o validator em uma variável chamada “val” dentro desses métodos no arquivo de script. Quando um campo não é válido é chamada uma função chamada ValidatorUpdateDisplay que exibe o elemento SPAN do validator, assim é exibido o texto que foi atribuído no validador, como “Campo obrigatório”.
Outra ocasião que o validator é mostrado seria no load da página a chamada do método Page.Validate(), que seta a propriedade isvalid do validator como false, no caso de um RequiredFieldValidator por exemplo.
Solução
A solução é simples e aplica-se a todos os validators que estiverem na sua página. Basta sobrescrever o método ValidatorUpdateDisplay para manipular o visual do textnox a ser validado e outra parte para varrer todos os validator que já estão setados como isvalid = false.
Exemplo
O exemplo será passado no Visual Studio Team System 2008, mas pode também funciona nas versões anteriores. Vamos aos passos para criar um exemplo completo:
Passo 1
Abra o Visual Studio 2008, clique no menu Novo / Projeto, seleciona o tipo de projeto WEB e o template ASP.NET Web Application e chame sua aplicação de TesteCustomizaValidator. como mostra na figura 1.
Figura 1 – Criando o projeto web application
Passo 2
Na página DEFAULT.ASPX, que já é criada inicialmente, acrescente um TextBox, um RequiredFieldValidator e um Button. Configure o seu RequiredFieldValidator com as propriedades; ControlToValidate para “TextBox1”, ErrorMessage para “Campo obrigatório” e Text para “*” (asterisco). O resultado é visto na figura 2.
Passo 3
No código da página no método page_load acrescente o código Page.Validate(). Para validar os campos ao entrar a primeira vez na página como mostra o quadro 1, o código está em C#.
|
protected void Page_Load(object sender, EventArgs e) |
Quadro 1 – Código da página
Passo 4
Até agora não fizemos nada de anormal no nosso projeto, se executarmos a aplicação ao abrir aparece a mensagem “Campo obrigatório” em vermelho.
Então vamos ao que interessa, o código do quadro 2 mostra a sobrecarga do método ValidatorUpdateDisplay que é chamado automaticamente quando o botão é acionado e a validação é requerida. Também o loop verificando se todos os validator acrescentados na página estão válidos, caso contrátio ele deixa o TextBox com uma cor de fundo e o ToolTip com o ErrorMessage do validator.
Acrescente o código do quadro 2 no final do HTML da página Default.aspx, importante que ele esteje após o fechamento da tag FORM.
|
<SCRIPT type="text/javascript"> //ao validar no page.load |
Quadro 2 – Código javascript para alterar a cor do fundo dos campos não válidos
Está pronto, agora só executar a sua página, o resultado na figura 3, o campo fica com a for de fundo #FFFACD e o tooltip o mesmo que foi acrescentado no ErrorMessage do validator.
Conclusão
Essa é uma maneira prática para customizar a apresentação dos campos não válidos utilizando o componente nativo do Asp.Net desde a primeira versão. Essa forma apresentada dá mais clareza para o usuário ao destacar os campos não válidos.
Gostaria de utilizar o espaço para agradecer os diversos e-mails de agradecimento que recebo dos leitores do DevMedia e do MySpace (http://tiagodfranco.spaces.live.com/) e qualquer dúvida entre em contato pelo e-mail tiago@grupodias.com.br.
Um grande abraço a todos!
Tiago Silva Dantas Franco
