Programador Java: Validar con Javascript

Cuando el usuario rellena un formulario en una página web, éste se envía al servidor y hace las pertinentes operaciones con esos datos. Los datos que rellena el cliente deben ser validados, de forma que no mande campos en blanco o caracteres incorrectos. Para no saturar el servidor, lo correcto es que la validación se realice en el propio cliente. Para ello, se va a usar el lenguaje javascript. Este código tambien se descarga en el cliente junto al HTML.
Aquí hay un ejemplo de validación de un formulario, comprobando que el usuario no mande algun campo en blanco:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Registro</title>
    <script>

     function Validar() { 

       if (document.getElementById("idNombre").value == "") {
           document.getElementById("spanErrorNombre").innerHTML = "<font color='red'>* Campo obligatorio</font>";
       }else{
           if (document.getElementById("idPassword").value == "") {
                document.getElementById("spanErrorPassword").innerHTML = "<font color='red'>* Campo obligatorio</font>";
            }else{
                if (document.getElementById("idMail").value == "") {
                    document.getElementById("spanErrorMail").innerHTML = "<font color='red'>* Campo obligatorio</font>";
                }else{  
                    document.frm.submit();
                }
            }
       }

    }
    </script>
    </head>
    <body>
     <div align="center" style="background-color:gainsboro">
         <form action="RegistrarUsuarioServlet" method="post" name="frm" id="idFrm">
         <table>
             <tr>
                 <td>
                     <h2>Registro de usuario</h2>
                 </td>
             </tr>
             <tr>
                 <td>
                       <label> Nombre: </label>
                 </td>
                 <td>
                       <input type="text" name="txtNombre" id="idNombre"/>
                 </td>
                 <td>
                       <span id="spanErrorNombre"></span>
                 </td>
             </tr>
             <tr>
                 <td>
                     <label> Password: </label>
                 </td>
                 <td>
                       <input type="password" name="txtPassword" id="idPassword"/>
                 </td>
                 <td>
                       <span id="spanErrorPassword"></span>
                 </td>
             </tr>
             <tr>
                 <td>
                       <label> E-mail: </label>
                 </td>
                 <td>
                       <input type="text" name="txtMail" id="idMail"/>
                 </td>
                 <td>
                       <span id="spanErrorMail"></span>
                 </td>
             </tr>
             <tr>
                 <td>
                       <input type="button" name="BtnEnviar" id="BtnEnviarId" value="ENVIAR" onclick="Validar();" />
                 </td>
             </tr>

             </table>
         </form>
</div>
    </body>
</html>

En rojo se marca las etiquetas que encuadran el código Javascript. Aquí se pone en la parte de arriba por hacerlo más visible, pero es recomendable ponerlo debajo de todo el HTML para hacer la compilación más óptima. Aunque si va a ser un código más extenso, con muchas funciones, lo mejor sería crear un archivo .jsp aparte y luego llamarlo en la página principal.
En naranja se muestra cómo desde el HTML se llama a la función que hay en el javascript. El input type=”Button” tiene muchos eventos que se pueden controlar, como el momento de pulsar el boton (onClick), el de pasar el raton por encima(onMouseOver), etc.

Lo que hace este código es obtener los valores de cada campo mediante el getElementById y, si estan vacíos, insertar HTML en el hueco definido con la etiqueta <span>, mostrando un mensaje de error. Siempre es mejor por eficiencia usar el getElementById antes que el getElementByName. Tener en cuenta tambien que a todos los elementos de la página web a los que se vaya a hacer referencia en códigos javascript o en servlets, siempre se deben identificar con el id y el name, ya que los archivos java (servlets) lo van a referenciar con el valor dado en name y los archivos de javascript, con el id.

Por último, decir que Javascript no tiene nada que ver con Java, son lenguajes distintos, se le nombró así por puro marketing.

jueves, 2 de febrero de 2012

Validar con Javascript

No hay comentarios:

Publicar un comentario