Aprendiendo a programar entre todos: Validación de formulario HTML5 con JavaScript

Os dejo un pequeño y simple formulario hecho mediante HTML5 con la correspondiente comprobación de sus campos mediante JavaScript.
Lo que se pretende hacer es que cuando el usuario pulse el botón de envío del formulario,se ejecute el código JavaScript que debe comprobar:

que los campos nombre y apellidos no estén vacíos
que la dirección de correo electrónico esté bien formada (aparece @ en un carácter que no es el primero, y tiene al menos un punto tras la arroba)
que la contraseña tiene al menos 8 caracteres y
que la contraseña con su repetición.

Si no es así se muestra una alerta al usuario indicando el problema y se cancela el envío, limpiando los campos de contraseña. Si todo es correcto se procede con el envío.

Os dejo primero el código html (puede que haya algún error con el tema de formato por los < > y las etiquetas debido al copia y pega).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="codigo.js" type="text/javascript"></script> <!-- Para incluir el fichero JavaScript-->
  <title>Formulario</title> 
  <meta name="author" content="Aprendiendo a programar entre todos">
 </head>
 <body>
  <form method="post" action="mailto:aprendiendoaprogramarentretodo@gmail.com" name="formulario" enctype="text/plain" onsubmit="return validar();">
   <table>
    <tr>
     <td>Nombre</td>
     <td><input type="text" size="25" name="nombre"></td>
    </tr>
    
    <tr>
     <td>Apellidos</td>
     <td><input type="text" size="25" name="apellidos"></td>
    </tr>
    
    <tr>
     <td>Correo electrónico</td>
     <td><input type="text" size="25" name="email"></td>
    </tr>
    
    <tr>
     <td>Contraseña</td>
     <td><input type="password" size="25" name="pass"></td>
    </tr>
    
    <tr>
     <td>Repita contraseña</td>
     <td><input type="password" size="25" name="rpass"></td>
    </tr>

                                <tr>
                                        <td>Sexo (opcional) </td>
                                        <td>
                                             <input type="radio" name="sexo" value="mujer"> Mujer
                                                <input type="radio" name="sexo" value="hombre">Hombre<br>
                                        </td>
                                         
                                </tr>
                                <tr>
                                        <td><input type="checkbox" name="sesion" value="v_sesion">Deseo recibir ofertas</td>
                                        <td> </td>
                                </tr>                                                                

    
    <tr>
     <td><input type="reset" value="Reset"></td>
     <td><input type="submit" value="Enviar"></td>
    </tr>
    
   </table>
   
  </form>

 </body>
</html>

Y aquí el código JavaScript que valida los campos del formulario de la manera indicada anteriormente, comprobando de forma muy clara para que lo podáis ver bien cada una de las restricciones que se indican en el enunciado.

function resetPass (){
    document.formulario.pass.value = "";
    document.formulario.rpass.value = "";
    return false;
}

function validar (){
    var nombre = document.formulario.nombre.value;
    var apellidos = document.formulario.apellidos.value;
    var email = document.formulario.email.value;
    var pass =  document.formulario.pass.value;
    var rpass =  document.formulario.rpass.value;
    if(nombre === "" || apellidos === ""){
        alert("Error: nombre incompleto");
        return resetPass();
    }else if (email.indexOf('@') < 1){
        alert("Error en email (debe aparecer @)");
        return resetPass();
    }else if(email.lastIndexOf(".")  < email.indexOf('@') ){
        alert("Error en email (debe aparecer un .)");
        return resetPass();
    }else if(pass.length < 8){
        alert("Contraseña demasiado corta");
        return resetPass();     
    }else if(pass !== rpass){
       alert("Contraseñas no coinciden");
        return resetPass();
    }else{
       return true; 
    }
}

Está claro que es un ejemplo muy sencillo y realizado de forma muy básica, pero por algo se empieza ;)

Aprendiendo a programar entre todos

viernes, 6 de marzo de 2015

Validación de formulario HTML5 con JavaScript

No hay comentarios:

Publicar un comentario