Autor Tema: JavaScript validar formularios antes de envío Acceso document.forms CU01175E (Leído 3865 veces)

bermartinv · « **en:** 14 de Marzo 2016, 15:02 »

Hola, subo las soluciones a mis ejercicios sobre este tema CU01175E del tutorial básico del programador web, JavaScript desde cero:

Citar

Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido introducido por el usuarios sea válido. Crea un formulario que conste de cinco campos: nombre, apellidos, email, ciudad y país. Usando el evento onsubmit, realiza la validación para:

a) Comprobar que en el momento del envío ninguno de los campos tiene menos de dos caracteres (es decir, si está vacío, contiene una letra o dos letras se considerará no válido) accediendo a los campos mediante document.forms y elements.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    label{
        display:block;
        margin:10px;
    }    
    
    input{
        margin:10px;
    }
</style>
<script>
var envioFormulario = true;
    
function validar(){
    
    var formulario = document.forms['formularioContacto'];
    
    var expReg = /^\S{3,}$/;
    
    var msg= 'Los elementos que no tienen almenos tres caracteres son:';
    
    for (var i=0;i<formulario.elements.length-1;i++){
             
        if (!expReg.test(formulario.elements[i].value)){
            
            envioFormulario = false;
            
            msg += '\n'+formulario.elements[i].name;
            
        }
                
    }
    
            if (!envioFormulario){
                
                alert (msg);
                
                return false;
                
            }else{
                
                alert ('OK.Procedemos a enviar el formulario');
                
                return true;
                
            }
                
}    

</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
    <label>Nombre<input name="nombre" id="nombre"/></label>
    <label>Apellidos<input name="apellidos" id="apellidos"/></label>
    <label>Email<input name="email" id="email"/></label>
    <label>Ciudad<input name="ciudad" id="ciudad"/></label>
    <label>Pais<input name="pais" id="pais"/></label>    
    <label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>

Citar

b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por ejemplo formularioContacto.apellidos haría alusión a un elemento input cuyo atributo name es apellidos en un formulario cuyo atributo name es formularioContacto)

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    label{
        display:block;
        margin:10px;
    }    
    
    input{
        margin:10px;
    }
</style>
<script>
var envioFormulario = true;
    
function validar(){
    
    var formulario = document.forms['formularioContacto'];

    var expReg = /^\S{3,}$/;
    
    var msg= 'Los elementos que no tienen almenos tres caracteres son:';
       
     if (!expReg.test(formulario.nombre.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.nombre.name;
         
        }
    
     if (!expReg.test(formulario.apellidos.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.apellidos.name;
         
        }
    
     if (!expReg.test(formulario.email.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.email.name;
         
        }
    
     if (!expReg.test(formulario.ciudad.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.ciudad.name;
         
        }
    
     if (!expReg.test(formulario.pais.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.pais.name;
         
        } 
    
            if (!envioFormulario){
                
                alert (msg);
                
                return false;
                
            }else{
                
                alert ('OK.Procedemos a enviar el formulario');
                
                return true;
                
            }
                
}    

</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
    <label>Nombre<input name="nombre" id="nombre"/></label>
    <label>Apellidos<input name="apellidos" id="apellidos"/></label>
    <label>Email<input name="email" id="email"/></label>
    <label>Ciudad<input name="ciudad" id="ciudad"/></label>
    <label>Pais<input name="pais" id="pais"/></label>    
    <label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>

Saludos

pedro,, · « **Respuesta #1 en:** 14 de Marzo 2016, 21:00 »

Hola bermartinv.

En las dos soluciones pasa que cuando el formulario no se envía en el primer intento porque alguno de los campos está incorrecto, aunque se corrija, en el siguiente intento de enviar, seguirá saltando el mensaje 'Los elementos que no tienen almenos tres caracteres son:' y no se envía el formulario.
Esto sucede porque colocaste esta línea:

Código: [Seleccionar]

var envioFormulario = true;fuera de la funciónvalidar().

Lo demás todo bien.

Saludos.

bermartinv · « **Respuesta #2 en:** 14 de Marzo 2016, 21:49 »

Gracias pedro,, muy buena observación. Se me había pasado totalmente ese detalle de la variable.
Vuelvo a subir los código, modificando la posición de la variable.

Citar

Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido introducido por el usuarios sea válido. Crea un formulario que conste de cinco campos: nombre, apellidos, email, ciudad y país. Usando el evento onsubmit, realiza la validación para:

a) Comprobar que en el momento del envío ninguno de los campos tiene menos de dos caracteres (es decir, si está vacío, contiene una letra o dos letras se considerará no válido) accediendo a los campos mediante document.forms y elements.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    label{
        display:block;
        margin:10px;
    }    
    
    input{
        margin:10px;
    }
</style>
<script>
    
function validar(){
    var envioFormulario = true;
    
    var formulario = document.forms['formularioContacto'];
    
    var expReg = /^\S{3,}$/;
    
    var msg= 'Los elementos que no tienen almenos tres caracteres son:';
    
    for (var i=0;i<formulario.elements.length-1;i++){
             
        if (!expReg.test(formulario.elements[i].value)){
            
            envioFormulario = false;
            
            msg += '\n'+formulario.elements[i].name;
            
        }
                
    }
    
            if (!envioFormulario){
                
                alert (msg);
                
                return false;
                
            }else{
                
                alert ('OK.Procedemos a enviar el formulario');
                
                return true;
                
            }
                
}    

</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
    <label>Nombre<input name="nombre" id="nombre"/></label>
    <label>Apellidos<input name="apellidos" id="apellidos"/></label>
    <label>Email<input name="email" id="email"/></label>
    <label>Ciudad<input name="ciudad" id="ciudad"/></label>
    <label>Pais<input name="pais" id="pais"/></label>    
    <label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>

Citar

b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por ejemplo formularioContacto.apellidos haría alusión a un elemento input cuyo atributo name es apellidos en un formulario cuyo atributo name es formularioContacto)

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    label{
        display:block;
        margin:10px;
    }    
    
    input{
        margin:10px;
    }
</style>
<script>
    
function validar(){
    
    var envioFormulario = true;
    
    var formulario = document.forms['formularioContacto'];

    var expReg = /^\S{3,}$/;
    
    var msg= 'Los elementos que no tienen almenos tres caracteres son:';
       
     if (!expReg.test(formulario.nombre.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.nombre.name;
         
        }
    
     if (!expReg.test(formulario.apellidos.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.apellidos.name;
         
        }
    
     if (!expReg.test(formulario.email.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.email.name;
         
        }
    
     if (!expReg.test(formulario.ciudad.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.ciudad.name;
         
        }
    
     if (!expReg.test(formulario.pais.value)){
         
            envioFormulario = false;
         
            msg += '\n'+formulario.pais.name;
         
        } 
    
            if (!envioFormulario){
                
                alert (msg);
                
                return false;
                
            }else{
                
                alert ('OK.Procedemos a enviar el formulario');
                
                return true;
                
            }
                
}    

</script>
</head>
<body>
<form name="formularioContacto" method="get" onsubmit="return validar()">
    <label>Nombre<input name="nombre" id="nombre"/></label>
    <label>Apellidos<input name="apellidos" id="apellidos"/></label>
    <label>Email<input name="email" id="email"/></label>
    <label>Ciudad<input name="ciudad" id="ciudad"/></label>
    <label>Pais<input name="pais" id="pais"/></label>    
    <label><input type="submit" value="Enviar" id="botonEnvio"></label>
</form>
</body>
</html>

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

Noticias: