Autor Tema: JavaScript validar campo texto vacío, número o email en formularios web CU01182E (Leído 5136 veces)

Dimitar Stefanov · « **en:** 24 de Abril 2016, 22:34 »

Buenas noches. Mediante el presente hago entrega del ejercicio CU01182E del curso JavaScript desde cero.

Citar

EJERCICIO

Dado el siguiente código HTML que contiene un formulario con tres campos (nombre, apellidos y email):

 <!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css">body {background-color:yellow; font-family: sans-serif;}

label{color: maroon; display:block; padding:5px;}

</style>

</head>

<body>

<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2>

</div>

<!-- Formulario de contacto -->

<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>

<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>

</form>

</body></html>

Citar

Crear el código JavaScript que cumpla con las siguientes funciones:

a) Si la longitud (número de caracteres) del campo nombre es mayor de 15 o igual a cero, el formulario no se enviará.

b) Si la longitud (número de caracteres) del campo apellidos es mayor de 30 o igual a cero, el formulario no se enviará.

c) Si la longitud (número de caracteres) del campo email es mayor de 35 o igual a cero, el formulario no se enviará. Si el email no contiene el carácter @ el formulario no se enviará.

d) Si se produce cualquiera de las circunstancias anteriores, debe aparecer un recuadro con color de fondo naranja y texto negro a la derecha de la casilla de introducción de datos, informando del problema detectado en ese campo (si es que ese campo presenta algún problema). Nota: estos mensajes se deben mostrar sólo si el campo es erróneo después de pulsado el botón enviar, y deben desaparecer si el usuario realiza un nuevo intento y el campo es correcto. Los mensajes se incorporarán al DOM (no serán mensajes usando alert).

Ejemplo de ejecución. El usuario deja el nombre, apellidos y correo electrónico vacíos. A la derecha de las casillas de introducción de datos aparecerá: El nombre no puede estar vacío. Los apellidos no pueden estar vacíos. El correo electrónico no puede estar vacío.

Ahora el usuario introduce nombre: <<Juan Manuel de Todos los Santos Efímeros Ecuánimes de Todos los días de la Tercera Edad>>. Como apellidos introduce: <<Suárez>>. Y como correo electrónico introduce lo siguiente: << juanmanueldetodoslosantosefimerosecuanimesdetodoslosdias@gmail.com>>. Pulsa enviar. A la derecha de la casilla de introducción del nombre debe aparecer: “Nombre demasiado largo. Máximo 15 caracteres”. A la derecha de apellidos no aparecerá nada porque el apellido es correcto. A la derecha del correo electrónico debe aparecer: “Correo electrónico demasiado largo. Máximo 35 caracteres”. Ahora el usuario escribe como nombre: Juan Manuel. Como apellidos: Suárez. Y como correo electrónico juanmanuel@gmail.com. Pulsa enviar y el formulario es enviado.

El código quedará de la siguiente manera:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ejemplo aprenderaprogramar.com</title>
  <style type="text/css">
  body{
    background-color: yellow;
    font-family: sans-serif;
  }
  label{
    color: maroon;
    display: block;
    padding: 5px;
  }
  </style>
  <script type="text/javascript">

    var nombre = false;
    var apellidos = false;
    var correo = false;

  window.onload = function(){
  	document.formularioContacto.nombre.focus();
  	document.formularioContacto.addEventListener('submit', enviarFormulario);
  	document.formularioContacto.nombre.addEventListener('blur', verificarNombre);
  	document.formularioContacto.apellidos.addEventListener('blur', verificarApellidos);
  	document.formularioContacto.email.addEventListener('blur', verificarCorreo);
  	formulario = document.formularioContacto;
  }

  function verificarNombre(){
 	if(/^\D{1,15}$/.test(formulario.nombre.value)==false){
 		error1.style.backgroundColor = 'orange';
 		error1.style.color = 'black';
 		error1.innerHTML = 'El nombre es obligatorio y debe ser menos de 15 carácteres';
 	}else{
 		error1.innerHTML = '';
 		nombre = true;
 	}
  }

  function verificarApellidos(){
  	if(/^\D{1,30}$/.test(formulario.apellidos.value)==false){
 		error2.style.backgroundColor = 'orange';
 		error2.style.color = 'black';
 		error2.innerHTML = 'Los apellidos son obligatorios y deben ser menos de 30 carácteres';
 	}else{
 		error2.innerHTML = '';
 		apellidos = true;
 	}
  }

  function verificarCorreo(){
  	if(/^\D{1,35}$/.test(formulario.email.value)==false || (formulario.email.value).match(/@/)==null){
 		error3.style.backgroundColor = 'orange';
 		error3.style.color = 'black';
 		error3.innerHTML = 'El correo electrónico es obligatorio, deben ser menos de 35 carácteres y tiene que contener el símbolo "@"';
 	}else{
 		error3.innerHTML = '';
 		correo = true;
 	}
  }

  function enviarFormulario(evObject){
  	evObject.preventDefault();
  	if(nombre && apellidos && correo){
  		formulario.submit();
  	}else{
  		alert('Corrija los errores!!!')
  		if(!nombre){
  			formulario.nombre.focus();
  		}else if(!apellidos){
  			formulario.apellidos.focus();
  		}else{
  			formulario.email.focus();
  		}
  	}
  }

  </script>
</head>
<body>
  <div id="cabecera">
    <h1>Portal web aprenderaprogramar.com</h1>
    <h2>Didáctica y divulgación de la programarción</h2>
  </div>
  <!-- Formulario de contacto -->
  <form action="http://aprenderaprogramar.com" name="formularioContacto" class="formularioTipo1" method="get">
    <p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
    <label for="nombre"><span>Nombre:</span><input type="text" id="nombre" name="nombre"> <span id="error1"></span></label>
    <label for="apellidos"><span>Apellidos:</span><input type="text" id="apellidos" name="apellidos"> <span id="error2"></span></label>
    <label for="email"><span>Correo electrónico:</span><input type="text" id="email" name="email"> <span id="error3"></span></label>
    <label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
  </form>
</body>
</html>

Gracias.

César Krall · « **Respuesta #1 en:** 27 de Abril 2016, 08:26 »

Hola! Bien el código, realiza lo que pedía el ejercicio.

Como sugerencias de mejora:

Nombres de variables:

Código: [Seleccionar]

    var nombre = false;
    var apellidos = false;
    var correo = false;

nombre, apellidos, correo son campos del formulario. Si pones el mismo nombre a variables, ¿qué ocurre? Que hay una posible confusión. Para programar además de que el código funcione hay que buscar calidad en cuanto a legibilidad, por tanto recomendación no repetir nombres que puedan crear confusión. Aquí podrías haber usado nombreCorrecto = false; apellidosCorrecto=false; etc.

Variables globales: esto no lo he estudiado en profundidad pero te lo planteo como idea para que lo pienses tú. ¿Son realmente necesarias estas variables globales?

Una cosa a tener en cuenta es la separación de cometidos de las funciones. Cada función debe tener un cometido específico.

Código: [Seleccionar]

  function verificarNombre(){
 	if(/^\D{1,15}$/.test(formulario.nombre.value)==false){
 		error1.style.backgroundColor = 'orange';
 		error1.style.color = 'black';
 		error1.innerHTML = 'El nombre es obligatorio y debe ser menos de 15 carácteres';
 	}else{
 		error1.innerHTML = '';
 		nombre = true;
 	}
  }

¿Cuál es el cometido de esta función? Si el cometido es verificar el nombre, parece lógico que devolviera true o false (con un return) según el resultado de la verificación. Quizás de esta manera te puedas ahorrar usar una variable global. Otra cosa a tener en cuenta es que si quisiéramos podríamos crear una función para mostrar las alertas, y así tener esto separado de la verificación.

Por último una cosa en cuanto a la usabilidad del código: quedaría mejor que el mensaje de alerta desaparezca en cuanto se modifique algo en el campo que tiene un error. En el código no desaparece el mensaje de error al modificarse algo, sólo desaparece cuando pierde el foco

Saludos!

pedro,, · « **Respuesta #2 en:** 27 de Abril 2016, 10:03 »

Hola dimiste y César.

Me surge una duda después de ver el código de dimiste, el usa

Código: [Seleccionar]

error1.style.backgroundColor = 'orange';
lo que quiero decir es que directamente nombra el id de un elemento, sin haber usado anteriormente getElementById ni nada parecido.

He intentado buscar información sobre este tema y no he encontrado nada, si pudieseis dar una pequeña explicación me vendría bien.

Saludos.

César Krall · « **Respuesta #3 en:** 27 de Abril 2016, 10:19 »

Hola! Tienes razón Pedro, se trata de una situación extraña y no me había dado cuenta. Se trata de algo no estandarizado (no funcionará correctamente en todos los navegadores, incluso diferirá para un mismo navegador según su configuración) y en general no recomendado. Por tanto la recomendación sería modificar el código para adaptarse al estándar. Puede leerse sobre esto en http://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable

Saludos!

pedro,, · « **Respuesta #4 en:** 27 de Abril 2016, 11:52 »

Gracias por el aporte César, aveces se me olvida que es más fácil encontrar información en otros idiomas.

Saludos.

Dimitar Stefanov · « **Respuesta #5 en:** 27 de Abril 2016, 15:47 »

Buenas tardes, César y pedro,,

Primero que nada quería daros las gracias por los comentarios, y por las extensas correcciones

César, tienes razón, no debería de haber usado los mismos nombres como variables y como id's de las etiquetas.

Sobre las variables globales: para que una función conozca el parámetro de otra pensaba que estaba bien utilizar variables globales y no de ámbito local. Es por eso porque he utilizado las variables globales.

Es muy buena idea lo que me comentas que el momento de desaparecer el mensaje de error sea cuando empiezas a escribir algo en el campo y no cuando pierde el foco.

pedro,, , el modo de elegir así los elementos lo había visto comentado por bermartinv en algún ejercicio tuyo (o quizás en alguna suyo), pero recuerdo que lo había dicho él y lo puse en práctica. Pensaba que no era de práctica no recomendada.

Gracias

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript validar campo texto vacío, número o email en formularios web CU01182E (Leído 5136 veces)

Dimitar Stefanov

JavaScript validar campo texto vacío, número o email en formularios web CU01182E

César Krall

Re:JavaScript validar campo texto vacío, número o email en formularios web CU01182E

pedro,,

Re:JavaScript validar campo texto vacío, número o email en formularios web CU01182E

César Krall

Re:JavaScript validar campo texto vacío, número o email en formularios web CU01182E

pedro,,

Re:JavaScript validar campo texto vacío, número o email en formularios web CU01182E

Dimitar Stefanov

Re:JavaScript validar campo texto vacío, número o email en formularios web CU01182E

Preguntas y respuestas