Desde de a migração da web 1.0 para a web 2.0 uma palavra caracteriza a natureza das operações realizadas nos websites – esta palavra é “interatividade”. Interatividade neste contexto significa: usuário entrando em contato direto com os websites, fornecendo e colhendo informações.
Evidentemente que existem muitos mecanismos e tecnologias que proporcionam a interatividade do usuário com o sistema web em questão. Dentre estes mecanismos, aquele que considero o maior responsável pela interatividade por parte dos sistemas são os famosos “Formulários”.
Fomulários permitem aos usuários dentre as muitas possibilidades: comentar conteúdos, enviar novos conteúdos, interagir com transmissões esportivas ou de outra natureza, compartilhar informações, etc. É muito comum que usuários tirem fotos de seus celulares, por exemplo, acessem portais de conteúdos e, através de fomulários específicos, enviem estas fotos de modo que estas imagens sejam publicadas nestes portais.
Se formulários são importantes para implementar o processo interatividade, é de fundamental importância que estes formulários não permitam o envio de informações incorretas da forma mais eficiente possível. Para que possamos garantir a correção dos dados, é de fundamental importância que validemos estas informações que o usuário tenta enviar.
Este artigo tem como objetivo fundamental apresentar o processo de validação de formulários utilizando os recursos do Visual Studio 2010 e do ASP.NET (os Validator’s) com o Ajax Control Toolkit.
Instalando o Ajax Control Toolkit
O Ajax Control Toolkit é um conjunto de bibliotecas JavaScript desenvolvidas pela Microsoft que permitem ao desenvolvedor efetuar chamadas assíncronas ao servidor nos eventos resultantes dos componentes ASP.NET. Para mais informações sobre o Ajax Control Toolkit clique AQUI.
Bom, vamos então a instalação da extensão no Visual Studio 2010.
Passo 1: Efetue o download do pacote com a extensão no CodePlex (http://ajaxcontroltoolkit.codeplex.com/).
Passo 2: Abra o Visual Studio 2010, clique em: File > New > Project. Selecione “ASP.NET Empty Web Application“. Nomeie seu projeto como achar conveniente e escolha o diretório para salvar a Solution.
Passo 3: Vá até a Solution Explorer, clique com o botão direito do mouse sobre o projeto. No menu que se abre posicione o mouse sobre Add > New item… Selecione “Web Form“, nomeie este arquivo conforme desejar e clique em “Add“.
Passo 4: Duplo clique sobre o arquivo com a extensão .aspx. Em seguida vá a guia Tools, clique com o botão direito do mouse na aba “General” e, em seguida, selecione a opção “Add Tab“. Nomeie a aba com o nome que lhe parecer pertinente e tecle “Enter“. Dentro desta nova aba, clique com o botão direito e selecione a opção “Choose Items“. Em seguida, na abra .NET Framework Components clique no botão “Browse…”. Caminhe por sua árvore de diretórios até o local onde está salva sua pasta do Ajax Control Toolkit e selecione o arquivo como o nome AjaxControlToolkit.dll e clique em OK. O processo descrito no Passo 4 é apresentado na Figura 1.
Figura 1: Processo de instalação do Ajax Control Toolkit (ACT)
Se você executou o procedimento corretamente, o ACT deve estar instalado em seus Visual Studio. Se você está trabalhando com o Visual Studio 2008 o processo é rigorosamente o mesmo.
Construindo o Formulário
Com o ACT devidamente instalado em nossa IDE, vamos então a construção do formulário que pretendemos validar. A Listagem 1 apresenta o HTML do formulário em questão.
Listagem 1: HTML do forumulário a ser validado
Ao analisarmos a Listagem 1 podemos notar a presença de quatro TextBox e um componente Button. O que faremos a seguir é:
- Campo tbNome: Verificaremos se o campo Nome está ou não vazio. Caso esteja, uma mensagem solicitando o preenchimento deste campo é impressa na tela, caso contrário, é o formulário é submetido no PostBack.
- Campo tbEmail: Verificaremos se o e-mail solicitado é ou não válido através das famosas Expressões Regulares. Em um artigo futuro escrevei um artigo apenas sobre expressões regulares. Caso o e-mail seja inválido, uma mensagem será impressa na tela solicitando o correto preenchimento do campo e-mail.
- Campo tbSenha1 e tbSenha2: Para os campos senha e confirmação de senha verificaremos se, além de estarem ou não vazios, se estes campos são iguais. Caso sejam vazios uma mensagem solicitando o preenchimento será impressa na tela. Caso estejam preenchidos os campos mas com conteúdos distos um do outro, uma nova mensagem será impressa na tela solicitando a equivalência das senhas.
Para efetuar as validações utilizaremos componentes prontos do ASP.NET, os Validator’s. Para o campo “Nome”, utilizaremos o componente “RequiredFieldValidator“. Este componente tem a função de verificar se o campo ao qual ele se refere está vazio ou não. Para o campo “E-mail” utilizaremos o componente “RegularExpressionValidator“. Como o nome sugere, este componente verifica se o conteúdo de determinado campo respeita a lei imposta pela expressão regular. Finalmente, para os campos “Senha” e “Confirmação de Senha” utilizaremos além do “RequiredFieldValidator“, utilizaremos o componente CompareValidator, que possui a função de comparar dois campos.
Neste ponto você deve estar se perguntando: Se os Validator’s são componentes prontos do ASP.NET, onde entra o ACT?
A resposta é simples. O ACT terá a função de aplicar um aspeto profissional às mensagens de erro geradas pelo processo de validação .
Associando os Validator’s aos Campos e Testando
Muito bem, voltemos à página com a extensão .aspx. Caso esta página não esteja em modo Design alterne a página para este modelo.
Em seguida, vá até a janela ToolBox (a esquerda no VS 2010), e clique na guia “Validation“. Várias opções de componentes são abertas imediatamente abaixo. Clique sobre o componente RequiredFieldValidator e arraste imediatamente a frente do componente tbNome criado anteriormente. A Figura 2 descreve esse processo.
Figura 2: Arrastando o componente Validator a frente do elemento que ele validará
Para o campo E-mail arraste a frente dele o componente RegularExpressionValidator. Para os campos “Senha” e “Confirmação de Senha” adicione o componente RequiredFieldValidator (para ambos) e o componente CompareValidator (apenas para o campo “Confirmação de Senha”).
Após estes processos, sua tela deverá estar parecida com aquela da Figura 3.
Figura 3: Validator’s para cada campo do formulário
Muito bem, componentes devidamente adicionados a nosso formulário, basta então configurarmos estes componentes para que as validações funcionem corretamente. Vamos a elas:
- tbNome (RequiredFieldValidator): Vamos configurar 3 características deste componente. Para isso vá até a janela Properties (à direita no VS 2010). São elas: ControlToValidate = “tbNome”; Display = “None”; ErrorMessage = “Por favor, preencha o campo Nome”;.
- tbEmail (RegularExpressionValidator): Para o RegularExpressionValidator vamos configurar os mesmos 3 componentes e um adicional. São eles: ControlToValidate = “tbEmail”; Display = “None”; ErrorMessage = “Por favor, informe um E-mail válido”; ValidationExpression = Na janela que se abre selecione a opção “Internet E-mail Address“;.
- tbSenha1 (RequiredFieldValidator): ControlToValidate = “tbSenha1”; Display = “None”; ErrorMessage = “Por favor, informe a senha”;.
- tbSenha2 (CompareValidator): ControlToCompare = “tbSenha1”; ControlToValidate = “tbSenha2”; Display = “None”; ErrorMessage = “Os campos Senha e Confirme a Senha devem ser iguais”;.
Vamos a uma breve explicação sobre cada um dos ítens de configuração:
- ControlToValidate: seleciona-se o campo que o componente deve validar. É onde fazemos a associação da validação com o respectivo campo;
- Display: defini-se a forma como a mensagem deve ser exibida. Pode receber os valores dynamic, static e none;
- Error Message: onde detalhamos a mensagem de erro proveniente do processo de validação;
- Validation Expression: onde define-se a expressão regular que rege o comportamento do campo;
- ControlToCompare: especificamente para o componente CompareValidator é onde definimos com qual campo o conteúdo do campo corrente será comparado;
Ao final deste processo, sua tela deverá estar parecida com aquela apresentada na Figura 4.
Figura 4: Validator’s configurados
Adicionando as Extensões Ajax
Estamos quase terminando. Falta agora associar os validator’s às extensões Ajax para que possamos ter uma apaência profissional de nosso formulário no momento da validação.
Para isso, clique no componente Validator. Observer que, ao clicar, uma pequena aba se abre a direita do componente. Clique no símbolo [>]. Uma pequena janela se abre com o link “Add Extender”. Clique neste link. Na janela que se abre selecione a extensão “ValidatorCalloutExtender” e selecione OK. Faça isso para cada um dos validator’s.
A Figura 5 apresenta este processo.
Figura 5: Selecionando o extender do Ajax Control Toolkit
Para finalizarmos o processo, precisamos adicionar o ScriptManager. O ScriptManager é um componente do ASP.NET que gerencia todos os componentes Ajax presentes na página. Para isso, vá até a ToolBox, clique na guia Ajax Extensions, em seguida arraste o ScriptManager para qualquer ponto da página.
Pronto, basta agora testarmos. O resultado é aquele apresentado na Figura 6.
Figura 6: Resultado final do processo de validação
Você pode baixar o projeto utilizado neste artigo clicando AQUI.
Muito obrigado pela atenção de todos e não esqueça de deixar seus comentários. 🙂 .
Facebook
Twitter
Instagram
LinkedIn
RSS