ES6 - Validações

Form validationnormalmente ocorre no servidor, após o cliente inserir todos os dados necessários e pressionar o botão Enviar. Se os dados inseridos pelo cliente estivessem incorretos ou simplesmente faltando, o servidor teria que enviar todos os dados de volta ao cliente e solicitar que o formulário fosse reenviado com as informações corretas. Este era realmente um processo demorado que costumava sobrecarregar o servidor.

JavaScript fornece uma maneira de validar os dados do formulário no computador do cliente antes de enviá-los ao servidor da web. A validação de formulário geralmente executa duas funções.

Basic Validation - Em primeiro lugar, o formulário deve ser verificado para garantir que todos os campos obrigatórios estão preenchidos. Seria necessário apenas um loop em cada campo do formulário e verificar os dados.
Data Format Validation- Em segundo lugar, os dados inseridos devem ser verificados quanto à forma e ao valor corretos. Seu código deve incluir lógica apropriada para testar a exatidão dos dados.

Exemplo

Vamos dar um exemplo para entender o processo de validação. Aqui está um formulário simples em formato html.

<html>
 
   <head> 
      <title>Form Validation</title> 
      <script type = "text/javascript"> 
         <!--  
            // Form validation code will come here.  
            //
         --> 
      </script> 
   </head> 

   <body> 
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());"> 
         <table cellspacing = "2" cellpadding = "2" border = "1"> 
            <tr> 
               <td align = "right">Name</td> 
               <td><input type = "text" name = "Name" /></td>
            </tr> 
            <tr> 
               <td align = "right">EMail</td> 
               <td><input type = "text" name = "EMail" /></td> 
            </tr> 
            <tr> 
               <td align = "right">Zip Code</td> 
               <td><input type = "text" name = "Zip" /></td> 
            </tr> 
            <tr> 
               <td align = "right">Country</td> 
               <td> 
                  <select name = "Country"> 
                     <option value = "-1" selected>[choose yours]</option> 
                     <option value = "1">USA</option> 
                     <option value = "2">UK</option> 
                     <option value = "3">INDIA</option> 
                  </select> 
               </td> 
            </tr> 
            <tr> 
               <td align = "right"></td> 
               <td><input type = "submit" value = "Submit" /></td> 
            </tr> 
         </table> 
      </form> 
   </body> 
   
</html>

Resultado

A seguinte saída é exibida na execução bem-sucedida do código acima.

Validação de Formulário Básico

Primeiro, vamos ver como fazer uma validação básica de formulário. No formulário acima, estamos chamandovalidate() para validar os dados quando onsubmitevento está ocorrendo. O código a seguir mostra a implementação dessa função validate ().

<script type = "text/javascript"> 
   <!--  
      // Form validation code will come here. function validate() {    
         if( document.myForm.Name.value == "" ) {  
            alert( "Please provide your name!" );      
            document.myForm.Name.focus() ;      
            return false;  
         }  
         if( document.myForm.EMail.value == "" ) {  
            alert( "Please provide your Email!" );      
            document.myForm.EMail.focus() ;      
            return false; 
         }  
         if( document.myForm.Zip.value == "" ||            
         isNaN( document.myForm.Zip.value ) ||            
         document.myForm.Zip.value.length != 5 ) {  
            alert( "Please provide a zip in the format #####." );      
            document.myForm.Zip.focus() ;      
            return false;  
         }  
         if( document.myForm.Country.value == "-1" ) {  
            alert( "Please provide your country!" );      
            return false;  
         }  
         return( true );  
      }  
      //
   --> 
</script>

Validação de formato de dados

Agora veremos como podemos validar nossos dados de formulário inseridos antes de enviá-los ao servidor da web.

O exemplo a seguir mostra como validar um endereço de e-mail inserido. Um endereço de e-mail deve conter pelo menos um sinal '@' e um ponto (.). Além disso, o '@' não deve ser o primeiro caractere do endereço de e-mail e o último ponto deve ser pelo menos um caractere após o sinal '@'

Exemplo

Tente o seguinte código para validação de email.

<script type = "text/javascript"> 
   <!--  
      function validateEmail() { 
         var emailID = document.myForm.EMail.value;    
         atpos = emailID.indexOf("@");    
         dotpos = emailID.lastIndexOf(".");    
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {       
            alert("Please enter correct email ID")         
            document.myForm.EMail.focus() ;         
            return false;    
         }     
         return( true );  
      } 
      //
   --< 
</script>