Codificación aprenderaprogramar.com: CU01185E
VALIDACIÓN DE FORMULARIOS JAVASCRIPT
Con los conocimientos que hemos ido adquiriendo durante el curso somos capaces de realizar la validación de un formulario para evitar que sea enviado si no cumple con ciertos criterios. En caso de no cumplir, podemos mostrar un aviso al usuario para que corrija o rellene los datos necesarios.
EJEMPLO DE VALIDACIÓN DE UN FORMULARIO
En esta entrega te proponemos que estudies y ejecutes el código que te mostramos a continuación. Es importante que lo analices línea a línea y que comprendas el significado de cada instrucción. Si has venido siguiendo el curso debes ser capaz de comprenderlo totalmente, ya que no estamos introduciendo conceptos nuevos, sino viendo una aplicación de conceptos ya estudiados.
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <style type="text/css"> body {margin-left:30px; font-family: sans-serif;} h4 {margin:0;} div {float:left;} .estiloForm, #validacionDatos {background-color: #f3f3f3; border: solid 2px black; margin-left:10px; width:300px; } .estiloForm{ width: 330px; padding:10px;} #validacionDatos {height:226px; padding:10px; background-color: yellow;} .estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;} br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;} </style> <script type="text/javascript"> window.onload = function () { formularioContacto.addEventListener("submit", validarFormulario); document.getElementById('validacionDatos').style.visibility = 'hidden'; formularioContacto.addEventListener("change", ocultarAvisos); }
function ocultarAvisos() {document.getElementById('validacionDatos').style.visibility = 'hidden';}
function validarFormulario(elEvento) { elEvento.preventDefault(); //Impedir envío del formulario hasta que se realice la validación var msgValidacion = ''; var casillaDatos = document.getElementById('validacionDatos'); //Nodo donde vamos a mostrar la validación de datos casillaDatos.innerHTML = '<h4> Aviso datos a revisar o corregir: </h4>'; var radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttons var checkboxElements = new Array(); var elementosSelect = document.getElementsByTagName('select'); var elementosDelForm = document.getElementsByTagName('input'); //Elementos input
/*Validación de que se haya elegido un radio button*/ var radioButElegido = false; for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButElegido=true;} } if (radioButElegido == false){msgValidacion = msgValidacion+'<p>(*) No hay elegido tratamiento sr. o sra. </p> ';} /*Validación de que los campos input text no estén vacíos*/ var textosConformes = true; for(var i=0; i<elementosDelForm.length;i++) { if (elementosDelForm[i].type == 'text' && elementosDelForm[i].value=='') { msgValidacion = msgValidacion+'<p>(*) Campo '+ elementosDelForm[i].name +' está vacío </p> '; textosConformes = false; } }
/*Validación de que se haya elegido un elemento del select */ var ciudadElegida = true; indiceElegido = document.getElementById('ciudad').selectedIndex; if( indiceElegido == null || indiceElegido == 0 ) { msgValidacion = msgValidacion+'<p>(*) No hay elegida una ciudad. </p> '; ciudadElegida = false; }
/*Validación de que se haya elegido un checkbox*/ for(var i=0; i<elementosDelForm.length;i++) { if (elementosDelForm[i].type == 'checkbox') {checkboxElements.push(elementosDelForm[i]);} } var checkboxMarcado = false; for (var i=0; i<checkboxElements.length;i++) { if (checkboxElements[i].checked ==true) {checkboxMarcado=true;} } if (checkboxMarcado==false) {msgValidacion = msgValidacion+'<p>(*) No hay elegida ninguna preferencia </p> ';}
/*Decisión final: mostrar avisos si hay fallos o enviar el formulario si está correcto*/ if (radioButElegido == false || checkboxMarcado == false || textosConformes == false || ciudadElegida == false ) { document.getElementById('validacionDatos').style.visibility = 'visible'; casillaDatos.innerHTML= casillaDatos.innerHTML+msgValidacion; } else { alert ('Se ha realizado la validación de datos y es conforme, se procede al envío del formulario'); document.forms['formularioContacto'].submit(); } } </script></head> <body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3> <div class="estiloForm"> <form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com"> <label>Tratamiento</label> <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr. <input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/> <label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/> <label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/> <label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/> <label>Ciudad</label><select id="ciudad" name="ciudad"><option value="">Elija opción</option> <option value="Mexico">México D.F. (MX)</option> <option value="Madrid">Madrid (ES)</option> <option value="Santiago">Santiago (CL)</option> </select><br/> <label>Preferencias</label><input name="Libros" type="checkbox" />Libros <input name="Peliculas" type="checkbox" />Películas <input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/> </form> </div> <div style="float:left;"><div id="validacionDatos" style="float:left;"><h4> Aviso datos a revisar o corregir: </h4></div> </div></body></html> |
El resultado esperado es que si hay algún elemento que el usuario ha olvidado rellenar o marcar, se mostrará un mensaje de aviso informando de aquellos elementos que presentan problemas. Por ejemplo, si el usuario intenta enviar el formulario sin haber elegido ninguna opción ni rellenado ningún dato se mostrará el mensaje:
Aviso datos a revisar o corregir: (*) No hay elegido tratamiento sr. o sra. (*) Campo nombre está vacío (*) Campo apellidos está vacío (*) Campo direccion1 está vacío (*) No hay elegida una ciudad. (*) No hay elegida ninguna preferencia |
Cuando el usuario realiza un cambio en el formulario, los mensajes de aviso desaparecen (para ello hemos usado el evento onchange del formulario y modificado la propiedad css visibility del contenedor donde se muestran los mensajes). Cuando el usuario vuelve a pulsar el botón enviar, se le muestran los mensajes de aviso relativos a los campos que tienen problemas. Si ningún campo presenta problemas, se muestra el mensaje: “Se ha realizado la validación de datos y es conforme, se procede al envío del formulario” y el formulario es enviado a la url de destino.
INTRODUCIR EXPRESIONES REGULARES EN LA VALIDACIÓN DE FORMULARIOS
Una técnica bastante empleada y bastante útil es realizar validaciones basadas en comprobar que la entrada del usuario cumple con un determinado patrón. Por ejemplo, supongamos que solicitamos un número de teléfono y deseamos comprobar que exactamente tiene 9 dígitos. Por ejemplo 646 77 88 22 sería válido pero 646 77 88 22 11 no sería válido.
Esto se puede hacer de forma relativamente usando funciones para cadenas de caracteres y expresiones regulares. Ambas han sido explicadas en apartados anteriores del curso, por lo que no vamos a explicarlo aquí de nuevo. Revisa estos apartados del curso si tienes dudas. Un ejemplo de validación con expresiones regulares podría ser algo como esto:
var telefonoValue = document.getElementById('telefono').value; if( !(/^\d{9}$/.test(telefonoValue)) ) { alert ('Formato de teléfono no válido'); } |
Si no entiendes el significado de este código, revisa los apartados relacionados con expresiones regulares del curso.
EJERCICIO
Un programador ha desarrollado un código y nos han pedido que lo revisemos. Escribe este código en un editor y responde a las siguientes preguntas:
<html> <head> <meta charset="utf-8"> <style type="text/css"> input {margin:10px;} </style> <script> function Valida(formulario) { /* Validación de campos NO VACÍOS */ if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) { alert('Falta información'); return false; } if (isNaN(parseInt(formulario.campo2.value))) { alert('El campo2 debe ser un número'); return false; } /* validación del CÓDIGO POSTAL*/ var ercp=/(^([0-9]{5,5})|^)$/; if (!(ercp.test(formulario.cpostal.value))) { alert('Contenido del código postal no es un código postal válido'); return false; } /* validación del DNI */ var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/; if (!(erdni.test(formulario.dni.value))) { alert('Contenido del dni no es un DNI válido.'); return false; } /* validación del e-mail */ var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/; if (!(ercorreo.test(formulario.email.value))) { alert('Contenido del email no es un correo electrónico válido.'); return false; } /* si no hemos detectado fallo devolvemos TRUE */ return true; } </script> </head> <body> <form name="miFormulario" onsubmit="return Valida(this);" action="http://aprenderaprogramar.com" > Campo1 <input type="text" name="campo1"><br> Campo2 (debe ser número) <input type="text" name="campo2"><br> Código postal <input type="text" name="cpostal"><br> DNI <input type="text" name="dni"><br> email <input type="text" name="email"><br> <input type="submit" value="Enviar" name="enviar"> </form> </body> </html> |
a) ¿Cómo se realiza la comprobación de que no hay campos vacíos?
b) ¿Cómo se realiza la comprobación de que el campo 2 es un número?
c) ¿En qué consiste la validación del código postal? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
d) ¿En qué consiste la validación del DNI? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
e) ¿En qué consiste la validación del email? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
f) ¿Cómo se consigue que no se envíe el formulario si no se cumplen los requisitos exigidos?
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.