Web Forms -Validação de Formulários

Para entendermos como fazer uma validação em um formulário, primeiro precisamos desenhar este formulário, utilizando HTML ,CSS, para assim começarmos a fazer as validações.

Existem várias técnicas para fazer validação de dados. Um exemplo de validação é quando queremos enviar os dados para o servidor somente se todos os campos estiverem sido preenchidos. Caso um dos ítens não estiver preenchido, podemos indicar um alerta no campo que está vazio para que o usuário preencha este campo.

Iremos clicar no botão ok para enviar um POST para o servidor, que vai processar esses dados e retornar para o usuário que tudo está correto, podendo então, esses dados serem mostrados na tela.

O objetivo desta aula é construir um formulário em HTML e JavaScript no browser e construir uma validação também no servidor. Vamos utilizar alguns componentes como o RequiredFieldValidator, para entendermos como utilizar algumas técnicas do C# para fazer validações muito simples, somente arrastando os componentes de validação e vinculando esses componentes para alguns objetos que teremos na tela.

Validação com RegisterClientScriptBlock

Uma técnica utilizada para mostrar as mensagens na tela é registrando o Javascript com o método RegisterClientScriptBlock da classe Client, passando três parâmetros: página atual, chave e o tipo de script, respectivamente.

Vamos criar no formulário, três campos do tipo input (nome, telefone e endereço) e um campo do tipo Button (Validar), para fazermos as validações.

Ao clicar no botão Validar(chamado de Button1), caso algum campo esteja em branco, será disparada uma mensagem de alerta, conforme exemplo abaixo:

      
        public partial class Formulário : System.Web.UI.Page
        {
          protected void Page_Load(object sender, EventArgs e)
          {
          
          }

          protect void Button1_Click(object sender, EventArgs e) 
          {
            if(txtNome.Text == "")
            {
              Client.RegisterClientScriptBlock(this.GetType(), 
                                              "erro nome", 
                                              "< script> alert('Nome precisa estar preenchido');< /script>"
                                              );
            }

            if(txtTelefone.Text == "")
            {
              Client.RegisterClientScriptBlock(this.GetType(), 
                                              "erro telefone", 
                                              "< script> alert('Telefone precisa estar preenchido');< /script>"
                                              );
            }

            if(txtEndereco.Text == "")
            {
              Client.RegisterClientScriptBlock(this.GetType(), 
                                              "erro endereco", 
                                              "< script> alert('Endereço precisa estar preenchido');< /script>"
                                              );
            }

          }
        }  
       
    

Ao clicar com botão direito do mouse em inspecionar elemento, serão adicionadas dentro da tag < body>, três tags < script> do Javascript, uma para cada campo. Precisamos inserir chaves diferentes em cada campo, para que todas as mensagens sejam mostradas.

Validação com InnerHTML

Podemos escolher o local no qual as mensagens serão mostradas, ao invés de mostrar um Alert. Para isso iremos criar uma tag < div> com o id=validacao, onde as mensagens de erro serão mostradas.

      
        < body>
          < form id="form" runat="server" >
            < div>
              < asp:Label ID="Label2" runat="server" Text="Nome">< /asp:Label>
              < asp:TextBox ID="txtNome" runat="server">< /asp:TextBox>
            < /div>
            
            < div>
              < asp:Label ID="Label2" runat="server" Text="Telefone"> < /asp:Label>
              < asp:TextBox ID="txtTelefone" runat="server">< /asp:TextBox>
            < /div>

            < div>
              < asp:Label ID="Label3" runat="server" Text="Endereco">< /asp:Label>
              < asp:TextBox ID="txtEndereco" runat="server">< /asp:TextBox>
            < /div> 

            < div id="validacao" runat="server" >
            < asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text= "Validar" />
          < /form>  
        < /body>
       
    

Agora vamos utilizar o InnerHTML para mostrar as mensagens:

      
        public partial class Formulário : System.Web.UI.Page
        {
         
          protect void Button1_Click(object sender, EventArgs e) 
          {
            validacao.InnerHtml = "";

            if(txtNome.Text == "")
            {
              validacao.InnerHtml += "Nome precisa estar preenchido< br>";
            }

            if(txtTelefone.Text == "")
            {
              validacao.InnerHtml += "Telefone precisa estar preenchido< br>";            
            }

            if(txtEndereco.Text == "")
            {
              validacao.InnerHtml += "Endereço precisa estar preenchido< br>";            
            }

          }
        }  
       
    

Validação com função JavaScript

Vamos inserir uma função Javascript na tag < /form> - propriedade onsubmit, chamada validacao().

Faremos a função Validacao() em uma tag < script>, como mostra o exemplo abaixo:

      
        < body>

          < script> 

            var validacao = function() {
              var nome = document.getElementById("txtNome");
              var telefone = document.getElementById("txtTelefone");
              var endereco = document.getElementById("txtEndereco");

              if (nome.value == "")
              {
                alert("Nome precisa estar preenchido");
                nome.focus();
                return false;
              }
  
              if (telefone.value == "")
              {
                alert("Telefone precisa estar preenchido");
                telefone.focus();
                return false;
              }
  
              if (endereco.value == "")
              {
                alert("Endereço precisa estar preenchido");
                endereco.focus();
                return false;
              }

              return true;

            }

          < /script> 

          < form id="form" runat="server" onsubmit="return Validacao()" >
            < div>
              < asp:Label ID="Label2" runat="server" Text="Nome">< /asp:Label>
              < asp:TextBox ID="txtNome" runat="server">< /asp:TextBox>
            < /div>
            
            < div>
              < asp:Label ID="Label2" runat="server" Text="Telefone"> < /asp:Label>
              < asp:TextBox ID="txtTelefone" runat="server">< /asp:TextBox>
            < /div>

            < div>
              < asp:Label ID="Label3" runat="server" Text="Endereco">< /asp:Label>
              < asp:TextBox ID="txtEndereco" runat="server">< /asp:TextBox>
            < /div> 

            < div id="validacao" runat="server" >
            < asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text= "Validar" />
          < /form>  
        < /body>
       
    

Validação com RequiredFieldValidator

O RequiredFieldValidator é um componente do C# utilizado para fazer validações.

Iremos arrastar um componente RequiredFieldValidator para cada campo que inserimos no formulário, ou seja, nome, telefone e endereço.

Para configurar o RequiredFieldValidator, clicar nas propriedades :

• ControlToValidate, inserir o nome do elemento da validação, por exemplo, txtEndereco.
• ErrorMessage, inserir a mensagem de erro, por exemplo, Endereço é obrigatório.

Validação com ValidationSummary

O ValidationSummary mostra todas as mensagens "sumarizadas" de acordo com a configuração feita no componente RequiredFieldValidator.

Iremos arrastar um componente ValidationSummary, abaixo do campo Endereço.

Para que as mensagens não sejam mostradas ao lado de cada campo , selecionamos o componente RequiredFieldValidator - propriedade Text e inserimos um asterisco(*), somente para sinalizar que o campo precisa ser preenchido.