JavaScript: validación de formularios

La validación de formularios normalmente se realizaba en el servidor, después de que el cliente había ingresado todos los datos necesarios y luego presionado el botón Enviar. Si los datos ingresados por un cliente eran incorrectos o simplemente faltaban, el servidor tendría que enviar todos los datos al cliente y solicitar que el formulario se vuelva a enviar con la información correcta. Este fue realmente un proceso largo que solía poner una gran carga en el servidor.

JavaScript proporciona una forma de validar los datos del formulario en la computadora del cliente antes de enviarlo al servidor web. La validación de formularios generalmente realiza dos funciones.

Basic Validation - En primer lugar, se debe verificar el formulario para asegurarse de que todos los campos obligatorios estén completados. Solo sería necesario recorrer cada campo del formulario y verificar los datos.
Data Format Validation- En segundo lugar, se debe verificar que los datos ingresados tengan la forma y el valor correctos. Su código debe incluir la lógica adecuada para probar la exactitud de los datos.

Ejemplo

Tomaremos un ejemplo para entender el proceso de validación. Aquí hay un formulario simple en 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>

Salida

Validación de formulario básico

Primero veamos cómo hacer una validación de formulario básica. En el formulario anterior, estamos llamandovalidate() para validar datos cuando onsubmitestá ocurriendo el evento. El siguiente código muestra la implementación de esta función 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>

Validación del formato de datos

Ahora veremos cómo podemos validar los datos de nuestro formulario ingresado antes de enviarlo al servidor web.

El siguiente ejemplo muestra cómo validar una dirección de correo electrónico ingresada. Una dirección de correo electrónico debe contener al menos un signo '@' y un punto (.). Además, la '@' no debe ser el primer carácter de la dirección de correo electrónico, y el último punto debe ser al menos un carácter después del signo '@'.

Ejemplo

Pruebe el siguiente código para la validación de correo electrónico.

<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>