Autor Tema: JavaScript validar campos de formulario dinámicamente Lista de eventos CU01159E (Leído 2249 veces)

Pepote21 · « **en:** 11 de Junio 2017, 16:10 »

Hola a todos. Os paso los códigos de mis dos ejercicios de la entrega CU01159E del curso de fundamentos de desarrollo web con JavaScript usando Notepad++ como editor.

Gracias. Un saludo.

Ejercicio 1

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
           
        </style>
        <script type="text/javascript">    
            window.onload=function(){
                document.getElementById('imagen').addEventListener('mouseover',reemplazarImagen);
				document.getElementById('imagen').addEventListener('mouseout',recuperarImagen);
		    
                function reemplazarImagen(){
                    this.src="http://i.imgur.com/SpZyc.png";
				    this.title="Imagen del producto tmotion";
				    this.alt="imagen producto t-motion";
                }
                function recuperarImagen(){
			        this.src="http://i.imgur.com/tq5Bs.png";
				    this.title="Imagen del producto xfashion";
				    this.alt="imagen producto x-fashion";
                }
            }			
        </script>
    </head>
    <body>
	    <script type="text/javascript">    
           
        </script> 
        <h1>La web para aprender programación</h1>
		<p></p>
		<p></p>
		<img id="imagen" src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto xfashiion" alt="imagen producto x-fashion" />
    </body>
</html>

Ejercicio 2

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color:  #fef5e7 ; font-family: sans-serif;}
            label {color: maroon; display:block; padding:5px;}
        </style>
        <script type="text/javascript">    
            window.onload=function(){
			    var nodoInput=document.getElementsByTagName('input');
				for(var i=0;i<nodoInput.length;i++){
				    nodoInput[i].addEventListener('focus',restaurar);
					nodoInput[i].addEventListener('blur',perderFoco);
				}
				function restaurar(){
				    this.style.backgroundColor='skyblue';this.nextSibling.textContent='';
					this.style.color='blue';
				}
				function perderFoco(){
				    this.style.backgroundColor='yellow';
					this.style.color='pink';
				}
			}
            function cambiarInput(nodo){
			    nodo.style.backgroundColor='red';nodo.nextSibling.textContent='dato erróneo,corríjalo';	
				nodo.style.color='yellow';
			}
		    function validar(){
			    var nodoNombre=document.getElementById('nombre');
				var nodoEdad=document.getElementById('edad');
				var nodoCorreo=document.getElementById('email');
				if(!comprobarNombre(nodoNombre.value)){
				    cambiarInput(nodoNombre); 
					return false;
                }else if(!comprobarEdad(nodoEdad.value)){
					cambiarInput(nodoEdad); 
					return false;
				}else if(!comprobarCorreo(nodoCorreo.value)){
					cambiarInput(nodoCorreo); 
					return false;
				}else{
				    return true;	
				}
			} 
			function comprobarNombre(nombre){  
			    var pattern1=/\w{3,}/; 
				//var pattern1=/^\s+$/;
				if(!pattern1.test(nombre)){
				    return false;				
                }else {
				    return true;
				}
			}
			function comprobarEdad(edad){              				
				if(edad<=0){
				    return false;
				}else {
				    return true;
				}
			}
			function comprobarCorreo(correoE){			   
			    var pattern1=/^\s+$/;
			    var pattern2=/[@]/;
                var pattern3=/[\.]/;
				var pattern4=/[a-z]@[a-z]/;
				var pattern5=/\.[a-z]+$/;
                if(!pattern1.test(correoE) && pattern2.test(correoE) && pattern3.test(correoE) && pattern4.test(correoE) && pattern5.test(correoE)){
					return true; 					
                }else{
				    return false;
				}
			}
        </script>
    </head>
    <body>
	    <script type="text/javascript">    
           
        </script> 
        <h1>La web para aprender programación</h1>
		<p></p>
		<p></p>
		<div style="width:800px;">
		<form id="form1" name ="formularioContacto" class="formularioTipo1" method="get" action="#" onsubmit=" return validar()">
            <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" placeholder="Introduzca su nombre" size="60" /><span></span></label>
            <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Introduzca sus apellidos" size="60" /><span></span></label>
            <label for="edad"><span>Edad:</span> <input id="edad" type="text" name="edad" placeholder="Introduzca su edad" size="60" /><span></span></label>
			<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" placeholder="Introduzca su correo electrónico" size="60px" /><span></span></label>
            <label>
				<input type="submit" value="Enviar" >
                <input type="reset" value="Cancelar">
            </label>
        </form>
		</div>
    </body>
</html>

    <!--<script type="text/javascript" language="JavaScript">
    function comprueba(obj) {
        if (obj.value=='') {
            if ((document.all)||(document.getElementById)) {
                obj.style.backgroundColor = '#999999';
            }
        } else {
            if ((document.all)||(document.getElementById)) {
                obj.style.backgroundColor = '#FFFFFF';
            }
        }
    }
    </script>
    <form action="">
      <input size="30"
        onclick="comprueba(this)"
        onfocus="comprueba(this)"
        onblur="comprueba(this)"
        onchange="comprueba(this)"
        value="Elimina el contenido para cambiar color">
    </form>-->

Ogramar · « **Respuesta #1 en:** 26 de Junio 2017, 19:27 »

Buenas Pepote21

El ejercicio 1 está bien, te ha faltado añadir algo de texto a los párrafos, se supone que si pone dos párrafos de texto es para poner algo de texto

El ejercicio 2 aunque has manejado bien conceptos y cumples con que no se envía el formulario si se detecta un problema, creo que sería deseable que se mejorara.

Los colores resultan un tanto extraños y no se ven bien las letras

Si dejo por ejemplo todos los campos en blanco, al pulsar en enviar únicamente me indica para el nombre "dato erróneo, corríjalo", sin embargo no me da ningún mensaje de error para el correo electrónico o la edad, que también estarían mal.

Si dejo el nombre en blanco e introduzco un correo electrónico erróneo tampoco me marca como erróneo el correo electrónico.

Lo ideal sería que al pulsar enviar se realizaran todas las validaciones y apareciera el color y el mensaje de advertencia correspondiente en todos los campos que están mal.

Salu2

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

Noticias: