Customizando os validators do ASP.Net

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

O artigo mostra uma solução simples para deixar o textbox com uma cor de fundo diferente utilizando o Validator nativo no ASP.Net

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.

 
Figura 2 – Montagem da tela

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)
        {
            if (!IsPostBack)
                Page.Validate();
        }

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">
        function ValidatorUpdateDisplay(val) {
            //inserido manualmente
            if (document.getElementById(val.controltovalidate) && (!val.isvalid || document.getElementById(val.controltovalidate).getAttribute('validador') == null || document.getElementById(val.controltovalidate).getAttribute('validador').toString() == val.id )) {
                document.getElementById(val.controltovalidate).style.background = val.isvalid ? "" : "#FFFACD";
                document.getElementById(val.controltovalidate).title = val.isvalid ? "" : val.errormessage;
                document.getElementById(val.controltovalidate).setAttribute('validador', val.isvalid ? null : val.id);
            }
            //fim
            if (typeof (val.display) == "string") {
                if (val.display == "None") {
                    return;
                }
                if (val.display == "Dynamic") {
                    val.style.display = val.isvalid ? "none" : "inline";
                    return;
                }
            }
            if ((navigator.userAgent.indexOf("Mac") > -1) &&
        (navigator.userAgent.indexOf("MSIE") > -1)) {
                val.style.display = "inline";
            }
            val.style.visibility = val.isvalid ? "hidden" : "visible";
        }

        //ao validar no page.load
        if (typeof (Page_Validators) != "undefined") {
            var i, val;
            for (i = 0; i < Page_Validators.length; i++) {
                val = Page_Validators[i];
                if (document.getElementById(val.controltovalidate) && (!val.isvalid || document.getElementById(val.controltovalidate).getAttribute('validador') == null || document.getElementById(val.controltovalidate).getAttribute('validador').toString() == val.id )) {
                    document.getElementById(val.controltovalidate).style.background = val.isvalid ? "" : "#FFFACD";
                    document.getElementById(val.controltovalidate).title = val.errormessage;
                    document.getElementById(val.controltovalidate).setAttribute('validador', val.isvalid ? null : val.id);
                }
            }
        }
    </SCRIPT>

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.

 

Figura 3 - resultado final ao validar um campo
 
 

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

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?