ASP .NET - Validação com JavaScript

A validação de dados é um tópico essencial em muitas aplicações Web tais como formulários de cadastro , de entrada de valores e informações pessoais , só para citar alguns exemplos muito usados. A tarefa de validar dados pode ser muito trabalhosa pois envolve validar dados tanto no lado do cliente como no lado do servidor. (Se você já usou alguma linguagem de scripts para fazer isto sabe do que eu estou falando...)

O ASP.NET tem um modelo de validação de dados composto de controles que são declarados na página e fazem todo este trabalho de forma quase automática e transparente para você. (Eles chegam até a verificar se o Browser do Cliente possui JavaScript para fazer a validação do lado do cliente...).

Eu já tratei dos controles de validação usados pela ASP .NET no artigo: ASP.NET - Trabalhando com Controles de validação

Eu também já mostrei como usar JavaScript com ASP .NET no artigo: ASP.NET 2.0 - Usando JavaScript I

Neste artigo quero mostrar uma outra alternativa que seria a validação de formulários ASP .NET usando JavaScript.

Relembrando alguns conceitos sobre JavaScript

Se você trabalha ou pretende trabalhar com desenvolvimento para web usando ASP.NET e já ouviu a frase : "Não se preocupe, você não precisa conhecer nada de JavaScript...", sinto informar-lhe que na realidade isto não é verdade.

Embora a ASP.NET tenha facilitado muito a vida do programador web oferecendo recursos para tratamento tanto do lado do servidor como do lado do cliente, conhecer JavaScript acaba sendo uma necessidade que você vai sentir no seu dia a dia, e que sem ela você vai sentir falta de alguns recursos que iriam lhe ajudar muito.

Nota: JavaScript não é a mesma coisa que Java. Java é uma linguagem de programação orientada a objetos com muito mais recursos que JavaScript que é um linguagem de scripts.

Você não vai precisar fazer um Phd em JavaScript mas precisa saber como o JavaScript funciona para poder usar em suas páginas ASP.NET recursos interessantes que a tornaram mais dinâmica e interativa.

A primeira coisa que você deve ter em mente é que JavaScript(Js) é usado para interação com o lado cliente efetuando validações, criando janelas pop-ups , emitindo mensagens, etc., onde o navegador do cliente é o encarregado de interpretar as instruções Javascript e executá-las.

O código javascript geralmente é colocado no documento HTML e deve estar entre as tags <script></script> para que possa funcionar. Além disso podemos incluir código JavaScript em eventos da página e de seus componentes.

Existem duas formas básicas de se executar JavaScript :

1- A execução direta - neste caso o código Js é colocado entre as tags <SCRIPT> e o quando o navegador ler a página e encontrar o script ele irá interpretar e executar o código

2- A resposta a um evento - Eventos são ações que são realizadas pelo usuário. O JavaScript esta preparado para responder a determinados eventos que ocorrem na página ou em seu controles e realizar ações como resposta a estes eventos. Exemplo de eventos: Clicar um botão (OnClick), receber o foco (Onfocus) , etc.

Nota: Tome o cuidado, o JavaScript é case sensitive , assim Alert() não funciona , o correto é alert().

Outra opção seria usar JQuery.

JQuery é uma livraria JavaScript rápida e leve que esta em conformidade com o CSS1-CCS2 e CCS3 e dá suporte a muitos navegadores.
O Framework JQuery é extensível(através de plug-ins) e efetua de forma elegante manipulações DOM , CSS, AJAX, eventos e animações,
permitindo assim desenvolver aplicações para web de forma mais rápida e simples.
Um script JQuery típico usa uma variedade de métodos que a library JQuery oferece: seletores, manipulação do DOM, tratamento de eventos, etc

Mas qual a diferença entre JavaScript e JQuery ??
JavaScript é uma linguagem e JQuery é uma livraria escrita usando JavaScript.
A versão atual do JQuery é a versão 1.3.2 que você pode baixar neste link: jquery-1.3.2.min.js

Validando com JavaScript

Neste artigo vou mostrar como realizar uma validação básica em um formulário ASP .NET usando JavaScript.

Eu vou usar o Visual Web Developer 2008 Express Edition e no menu File selecionar New Web Site e selecionar o template ASP .NET Web Site informando o nome ValidacaoJavaScript; (Você pode escolher a linguagem de sua preferência: C# ou Visual Basic)

Será criado um novo Web Site com a seguinte estrutura:

Vou usar a página Default.aspx para criar um formulário bem simples usando apenas os controles TextBox e Button conforme o leiaute da página abaixo:

Para manter alinhado os controles criei uma tabela com 5 linhas 2 duas colunas a partir do menu Table , opção Insert Table.

O código do formulário montado com a tabela e os controles é visto abaixo:

<form id="form1" runat="server">
    <div>
            <table>
            <tr><td colspan="2" class="style2">Macoratti.net</td>
            </tr>
            <tr><td>Nome</td>
                <td><asp:TextBox ID="txtNome" runat="server" Width="211px"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><asp:TextBox ID="txtEmail" runat="server" Width="211px"></asp:TextBox></td>
            </tr>
            <tr><td>URL</td>
                <td><asp:TextBox ID="txtURL" runat="server" Width="211px"></asp:TextBox></td>
            </tr>
            <tr><td>Cep</td>
                <td><asp:TextBox ID="txtCep" runat="server"></asp:TextBox></td>
            </tr>
        </table>
        <br />
      <asp:Button ID="btnSubmit" OnClientClick=" return validate()" runat="server" 
                Text="Enviar" Width="176px" />
     </div>
    </form>

No controle Button definimos o evento OnClientClick que acionará a rotina : return validate() que é a nossa função JavaScript que irá realizar a validação.

Temos a seguir o código JavaScript colocado entre as tags Head do formulário:

<script language="javascript" type="text/javascript">
        function validate() 
        {   //nome
            if (document.getElementById("<%=txtNome.ClientID%>").value == "")
            {
                alert("Informe o nome.");
                document.getElementById("<%=txtNome.ClientID%>").focus();
                return false;
            }
            //Alfanumerico e espaço(' '),nao aceita numeros e nem caracteres especiais min 5 e max 45 caracteres. 
            var ck_nome = /^[A-Za-z ]{5,45}$/;
            var tempNome = document.getElementById("<%=txtNome.ClientID%>").value;
            var matchNome = tempNome.match(ck_nome);
            if (matchNome == null) {
                alert("Nome inválido : Não informe números,  ");
                document.getElementById("<%=txtNome.ClientID %>").focus();
                return false;
            }
            //Email
            if (document.getElementById("<%=txtEmail.ClientID %>").value == "") 
            {
                alert("O Email não pode estar vazio");
                document.getElementById("<%=txtEmail.ClientID %>").focus();
                return false;
            }
            var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
            var emailid = document.getElementById("<%=txtEmail.ClientID %>").value;
            var matchArray = emailid.match(emailPat);
            if (matchArray == null) {
                alert("O Email esta no formato incorreto. Tente novamente.");
                document.getElementById("<%=txtEmail.ClientID %>").focus();
                return false;
            }
            //URL
            if (document.getElementById("<%=txtURL.ClientID %>").value == "") {
                alert("A URL informada esta incorreta tente novamente.");
                document.getElementById("<%=txtURL.ClientID %>").value = "http://"
                document.getElementById("<%=txtURL.ClientID %>").focus();
                return false;
            }
            var Url = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
            var tempURL = document.getElementById("<%=txtURL.ClientID%>").value;
            var matchURL = tempURL.match(Url);
            if (matchURL == null) {
                alert("A URL tem um formato inválido tente novamente.");
                document.getElementById("<%=txtURL.ClientID %>").focus();
                return false;
            }
            //Cep
            if (document.getElementById("<%=txtCep.ClientID%>").value == "") {
                alert("Informe o cep.");
                document.getElementById("<%=txtCep.ClientID%>").focus();
                return false;
            }
            if (document.getElementById("<%=txtCep.ClientID%>").value.length != 8) 
            {
                alert("O cep é inválido");
                document.getElementById("<%=txtCep.ClientID%>").focus();
                return false;
            }
            var digits = "0123456789";
            var temp;
            for (var i = 0; i < document.getElementById("<%=txtCep.ClientID %>").value.length; i++) {
                temp = document.getElementById("<%=txtCep.ClientID%>").value.substring(i, i + 1);
                if (digits.indexOf(temp) == -1) {
                    alert("Informe o Cep no formato correto");
                    document.getElementById("<%=txtCep.ClientID%>").focus();
                    return false;
                }
            }
            alert("Formulário enviado com sucesso");
            return true;
        }
</script>

Este código JavaScript realiza a validação dos campos Nome, Email, URL e Cep. Vamos entender como funciona:

Validação do campo Nome

a - Primeira Validação do campo Nome - O campo não pode ser vazio.

if (document.getElementById("<%=txtNome.ClientID%>").value == "")
{
   alert("Informe o nome.");
   document.getElementById("<%=txtNome.ClientID%>").focus();
   return false;
}

Este código valida o campo txtNome do formulário verificando se ele esta em branco. Neste caso emite uma caixa de alerta ao usuário com a mensagem : Informe o nome.

A função getElementById() do Javascript para retornar um objeto de qualquer elemento na página que tenha um id único, e também funciona na maioria dos navegadores.

Estamos usando essa função para obter o valor do campo txtNome.ClientID e verificando se o valor esta em branco. Em caso positivo exibimos uma caixa de alerta o usuário com a mensagem e o foco volta para o controle txtNome.

Mas o que vem a ser o ClienteID ???

A ASP.NET gera automaticamente uma ClientID para um controle de servidor, independentemente de você ter especificado uma propriedade ID para ele ou não. Esta propriedade é usada para identificar um controle para as operações do lado do cliente, tais como funções ECMAScript que incluem JavaScript.

a - Segunda Validação do campo Nome - Só deve aceitar caracteres não numéricos e espaço e não pode conter números nem caracteres especiais e tem que ter no mínimo 5 e no máximo 45 caracteres.

//Alfanumerico e espaço(' '),nao aceita numeros e nem caracteres especiais min 5 e max 45 caracteres.
var ck_nome = /^[A-Za-z ]{5,45}$/;
var tempNome = document.getElementById("<%=txtNome.ClientID%>").value;
var matchNome = tempNome.match(ck_nome);
if (matchNome == null)
{
   alert("Nome inválido : Não informe números nem caracteres especiais; informe no mínimo 5 e no máximo 45 caracteres.");
   document.getElementById("<%=txtNome.ClientID %>").focus();
   return false;
}

Estamos usando uma Expressão Regular para validar o campo nome para o critério definido.

As expressões regulares são padrões utilizados para encontrar combinações de caracteres em Strings.

As expressões regulares podem ser criadas de duas formas:

- Escrevendo uma expressão regular: procurar = /padrao/

- Criando uma instância do objeto RegExp: procurar = new RegExp("padrao");

Onde padrao é a string padrão para ser usada para realizar a pesquisa.

Em JavaScript, as expressões regulares também podem ser tratadas como um objeto. Podemos usar esses padrões com os métodos exec e test do objeto RegExp, e com os métodos match, replace, search, e split do objeto String. Abaixo vemos uma tabela com a definição destes métodos:

exec Método RegExp que executa pesquisas em uma string. Retorna um array das informações obtidas.
test Método RegExp que testa uma pesquisa em uma string. Retorna true ou false.
match Método de String que executa uma pesquisa em uma string. Retorna um array das informações obtidas ou nulo se nada for encontrado.
search Método de String que testa uma pesquisa em uma string. Retorna o índice do resultado, ou -1 se a pesquisa falhar.
replace Método de String que executa uma pesquisa em uma string e substitui o resultado encontrado por uma substring .
split Método de String que usa uma expressão regular ou uma string para quebrar uma string em uma array de substrings.

1- var ck_nome = /^[A-Za-z ]{5,45}$/; => Define a expressão regular
2- Obtemos o valor do campo txtNome e atribuímos a variável tempNome
3- Usamos o método match para verificar se o padrão definido pela expressão regular é encontrado no valor do controle txtNome:
var matchNome = tempNome.match(ck_nome);
4- Se o array retornado for igual a null então o critério não foi atendido e uma caixa de alerta é exibida ao cliente:if (matchNome == null)

c - Terceira Validação do campo Nome - (Opcional) Não permitir que seja informado apenas um nome. Obriga a informa nome e sobrenome.

var nome = document.getElementById("<%=txtNome.ClientID%>").value;
var padrao = " ";
listaNomes = nome.split(padrao);
if (listaNomes[1] == undefined || listaNomes[1]=="" || listaNomes[1] == " ")
{
   alert("Nome inválido : Informe nome e sobrenome ");
   document.getElementById("<%=txtNome.ClientID %>").focus();
   return false;
}

1- Obtemos o valor do controle txtNome e armazenamos na variável nome => var nome = document.getElementById("<%=txtNome.ClientID%>").value;
2- Definimos o padrão para expressão regular : var padrao = " ";
Onde padrao encontra qualquer caractere que equivale a um espaço.(Equivale a [ \t\r\n\v\f] );

3- Dividimos a string referente ao nome informado no controle usando o método split e o padrão espaço => listaNomes = nome.split(padrao);
4- Se o segundo elemento do array for indefinido (undefined), em branco ou vazio, então foi informado somente o nome e faltou o sobrenome. Neste caso exibimos um alerta ao cliente e retornamos o foco ao controle txtNome: listaNomes[1] == undefined || listaNomes[1]=="" || listaNomes[1] == " "

Validação do campo Email

a- Verifica se o formato do email é válido

var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
var emailid = document.getElementById("<%=txtEmail.ClientID %>").value;
var matchArray = emailid.match(emailPat);
if (matchArray == null) {
   alert("O Email esta no formato incorreto. Tente novamente.");
   document.getElementById("<%=txtEmail.ClientID %>").focus();
   return false;
}

Utiliza uma expressão regular padrão para verificar o formato do email e emite um alerta se o formato for inválido.

Validação do campo URL

a- Verifica se o formato da URL é válido

var Url = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
var tempURL = document.getElementById("<%=txtURL.ClientID%>").value;
var matchURL = tempURL.match(Url);
if (matchURL == null) {
   alert("A URL tem um formato inválido tente novamente.");
   document.getElementById("<%=txtURL.ClientID %>").focus();
   return false;
}

Utiliza uma expressão regular padrão para verificar o formato da URL e emite um alerta se o formato for inválido.

Validação do campo Cep

a- Verifica se o tamanho do valor informado é igual a 8

if (document.getElementById("<%=txtCep.ClientID%>").value.length != 8)
{
    alert("O cep é inválido");
   document.getElementById("<%=txtCep.ClientID%>").focus();
   return false;
}

Se o valor informado no campo CEP for diferente de 8 dígitos então emite um alerta ao cliente e retorna o foco ao controle txtCep.

b- Verifica se foram informados somente dígitos de 0 a 9

var digits = "0123456789";
var temp;
for (var i = 0; i < document.getElementById("<%=txtCep.ClientID %>").value.length; i++) {
temp = document.getElementById("<%=txtCep.ClientID%>").value.substring(i, i + 1);
if (digits.indexOf(temp) == -1) {
    alert("Informe o Cep no formato correto");
    document.getElementById("<%=txtCep.ClientID%>").focus();
    return false;
}

Aceita somente os dígitos de 0 a 9 como valor para o campo Cep. Se for informado outro valor emite um alerta ao cliente e retorna o foco ao controle txtCep.

Executando o web site e preenchendo o formulário veremos a validação em ação conforme figura abaixo:

Dessa forma mostrei como podemos validar um formulário ASP .NET usando JavaScript e expressões regulares. Eu não entrei em detalhes sobre as expressões regulares pois o assunto é muito vasto e não é o foco do artigo.

Pegue o projeto completo aqui: ValidacaoJavaScript.zip

"Pensai nas coisas que são de cima, e não nas que são da terra; Porque já estais mortos, e a vossa vida esta escondida com Cristo em Deus." Colossenses 3:2-3

Referências:

José Carlos Macoratti