Autor Tema: JavaScript ejercicio evento onsubmit HTML placeholder en formulario CU01142E#  (Leído 2077 veces)

Pepote21

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 92
    • Ver Perfil
Hola a todos. Os paso mi código para el ejercicio CU01142E del tutorial de programación web como si estuviera en primero con JavaScript. Gracias

Un saludo

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  tutorialesprogramacionya.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color:pink; font-family: sans-serif;}
            label {color: maroon; display:block; padding:5px;}
        </style>
        <script type="text/javascript">
    var msg='';
            function validar(){
                var nombre=document.getElementById('nombre').value;
var email=document.getElementById('email').value;

comprobarNombre(nombre);
email=transformarEmailAMinusculas(email);
email=rectificarAtEnEmail(email);
comprobarEmail(email);

    document.getElementById('email').value=email;
            }
            function comprobarNombre(nombre){
    if(nombre.length<3){
    msg='El nombre no cumple tener al menos tres letras';alert(msg);
}else{}
}
function comprobarEmail(email){
    var arroba=false;
var punto=false;
    for(var i=0;i<email.length;i++){
                if(email.charAt(i)=='@'){arroba=true;}
                if(email.charAt(i)=='.'){punto=true;}
            }
if(arroba==false && punto==false){
msg='Faltan los símbolos \'@\' y el \'.\'';alert(msg);
}else{
if(arroba==false){msg='Falta el símbolo \'@\' en el correo electrónico';alert(msg);}
if(punto==false){msg='Falta el símbolo \'.\' en el correo electrónico';alert(msg);}
}
}
function transformarEmailAMinusculas(email){
    return email.toLowerCase();
}
function rectificarAtEnEmail(email){
                return email.replace(/at/g,'@');
            }

        </script>
    </head>
    <body>
    <script type="text/javascript">   
           
        </script>
        <div style="width:450px;">
            <form name ="formularioContacto" class="formularioTipo1" method="get" action="https://www.aprenderaprogramar.com" onsubmit="validar()">
                <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" placeholder="Introduzca su nombre" size="60"/></label>
                <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Introduzca sus apellidos" size="60"/></label>
                <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" placeholder="Introduzca su correo electrónico" size=60px/></label>
                <label>
    <input type="submit" value="Enviar" >
                    <input type="reset" value="Cancelar">
                </label>
            </form>
        </div>


    </body>
</html>
« Última modificación: 16 de Junio 2017, 19:55 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2659
    • Ver Perfil
Buenas Pepote21

Como en otros hilos sobre este ejercicio, veo bien el código con un problema, es que si se encuentra un fallo además de mostrarse el mensaje de advertencia no se envíe el formulario pero esto se explica más adelante en el curso. Relacionado con esto está que si se muestra un mensaje de fallo al enviarse el formulario desaparecen los datos que había (al haberse enviado el formulario).

Como todo esto se explica más adelante en el curso y el código está bien planteado y bien estructurado en funciones ¡Todo bien!

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".