Autor Tema: JavaScript evento onsubmit envío de formulario ejecutar función validar CU01142E (Leído 7418 veces)

bermartinv · « **en:** 10 de Febrero 2016, 14:34 »

Adjunto mi código para este ejercicio del curso JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    form{
        border:solid thin yellow;
        background-color:coral;
        width: 500px;
        height:220px;
    }

    input {
        display:block;
        margin-left:30px;
    }    
    
    .enviar{
         border:solid thin aqua;
        display:inline;
        margin: 10px 10px 5px 50px;
        position: relative;
        top:50px; 
    }
    
</style>
<script>
function validar(){
    var nombre = document.getElementById("nombre").value;
    var email = document.getElementById("email").value;
    validarNombre(nombre);
    email = minusculasEmail(email);
    email = atEmail(email);
    validarEmail(email);  
}
    
function validarNombre(nombre){   
    if ((nombre.length)<3){
        alert("El nombre no cumple tener al menos tres letras");
        }
}
    
function validarEmail(email){
    var contadorArroba=false;
    var contadorPunto=false;
    for (var i=0;i<(email.length);i++){
         if (email[i]=='@'){
                contadorArroba=true;
            }
        if (email[i]=='.'){
                contadorPunto=true;   
            }
         }
    if (contadorArroba==false || contadorPunto==false){
        alert ("Su correo electronico deberia tener un \'@\' y un \'.' ");
    }
}

    function minusculasEmail(correo){
        return correo.toLowerCase();
    }
    
    function atEmail(correo){
        return correo.replace(/at/g,'@');    
    }
    

</script>
</head>
<body>
    <form method="get" onsubmit="validar()" name="formulario">
        <label>Nombre</label>
        <input type="text" name="nombre" id="nombre" placeholder="Introduzca su nombre" size="30"/>
        <label>Apellidos</label>
        <input type="text" name="apellidos" id="apellidos" placeholder="Introduzca sus apellidos" size="60"/>
        <label>Correo electrónico</label>
        <input type="text" name="email" id="email" placeholder="Introduzca email" size="60"/>
        <input class="enviar" type="submit" value="Enviar" />
        <input class="enviar" type="reset" value="Reset"/>
    </form>
    <div id="solucion"></div>
</body>
</html>

pedro,, · « **Respuesta #1 en:** 11 de Febrero 2016, 20:44 »

Hola bermartinv.

Si relleno el correo electrónico con mayúsculas cuando envío el formulario, lo manda en mayúsculas. Esto es lo que aparece en la barra de direcciones:

...nombre=pepe&apellidos=papa&email=PACO%40GMAIL.COM

Con el 'at' pasa lo mismo.

..nombre=parapapa&apellidos=Par&email=pepe+at+p.com

La comprobaciones se hacen correctamente, pero a la hora de enviar el formulario lo envía mal.

Saludos.

bermartinv · « **Respuesta #2 en:** 11 de Febrero 2016, 23:14 »

adjunto el nuevo código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    form{
        border:solid thin yellow;
        background-color:coral;
        width: 500px;
        height:220px;
    }

    input {
        display:block;
        margin-left:30px;
    }   
   
    .enviar{
         border:solid thin aqua;
        display:inline;
        margin: 10px 10px 5px 50px;
        position: relative;
        top:50px;
    }
   
</style>
<script>
function validar(){
    var nombre = document.getElementById("nombre").value;
    var email = document.getElementById("email").value;
    validarNombre(nombre);
    email = minusculasEmail(email);
    email = atEmail(email);
    validarEmail(email); 
    document.getElementById("email").value = email;
}
   
function validarNombre(nombre){   
    if ((nombre.length)<3){
        alert("El nombre no cumple tener al menos tres letras");
        }
}
   
function validarEmail(email){
    var contadorArroba=false;
    var contadorPunto=false;
    for (var i=0;i<(email.length);i++){
         if (email[i]=='@'){
                contadorArroba=true;
            }
        if (email[i]=='.'){
                contadorPunto=true;   
            }
         }
    if (contadorArroba==false || contadorPunto==false){
        alert ("Su correo electronico deberia tener un \'@\' y un \'.' ");
    }
}

    function minusculasEmail(correo){
        return correo.toLowerCase();
    }
   
    function atEmail(correo){
        return correo.replace(/at/g,'@');   
    }
   

</script>
</head>
<body>
    <form method="get" onsubmit="validar()" name="formulario">
        <label>Nombre</label>
        <input type="text" name="nombre" id="nombre" placeholder="Introduzca su nombre" size="30"/>
        <label>Apellidos</label>
        <input type="text" name="apellidos" id="apellidos" placeholder="Introduzca sus apellidos" size="60"/>
        <label>Correo electrónico</label>
        <input type="text" name="email" id="email" placeholder="Introduzca email" size="60"/>
        <input class="enviar" type="submit" value="Enviar" />
        <input class="enviar" type="reset" value="Reset"/>
    </form>
    <div id="solucion"></div>
</body>

No he tenido que hacer mucho pero hasta que me he dado cuenta me ha costado un poco. El hecho estaba en que modificaba el correo por las condiciones que ponía pero una vez modificado no lo volvía a poner en el formulario. Lo que me faltaba era:

Código: [Seleccionar]

document.getElementById("email").value = email;

pedro,, · « **Respuesta #3 en:** 11 de Febrero 2016, 23:28 »

Ahora todo perfecto.

Saludos.

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

Noticias:

Autor Tema: JavaScript evento onsubmit envío de formulario ejecutar función validar CU01142E (Leído 7418 veces)

bermartinv

JavaScript evento onsubmit envío de formulario ejecutar función validar CU01142E

pedro,,

Re:CU01142E cadenas de texto

bermartinv

Re:CU01142E cadenas de texto

pedro,,

Re:CU01142E cadenas de texto

Preguntas y respuestas