Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: bermartinv en 24 de Marzo 2016, 10:03
-
Adjunto la solución del ejercicio de este tema.
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).
<!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;margin:20px;}
.campoErroneo {
background-color: orange;
color : black;
margin-left: 10px;
}
</style>
<script>
var nombre = false;
var apellidos = false;
var email = false;
window.onload=function(){
var formulario = document.formularioContacto;
for (var i = 0;i < formulario.elements.length;i++){
if (formulario.elements[i].type == 'text'){
formulario.elements[i].addEventListener('focus',estiloIn);
formulario.elements[i].addEventListener('blur',estiloOut);
}
}
formulario.nombre.focus();
}
function estiloIn(){
this.style.backgroundColor = 'lightgreen';
this.value = '';
this.nextSibling.innerHTML='';
this.nextSibling.removeAttribute('class','campoErroneo');
}
function estiloOut(){
this.style.backgroundColor = 'white';
}
function validarDatos(){
validarNombre();
validarApellidos();
validarEmail();
if (nombre && apellidos && email){
return true;
}else{
return false;
}
}
function validarNombre(){
var msg = '';
if (document.formularioContacto.nombre.value.length > 15){
msg += 'El nombre debe tener menos de 15 caracteres';
nombre = false;
}else if (document.formularioContacto.nombre.value.length == 0 ){
msg += 'El campo nombre está vacio';
nombre = false;
}else if ( /^\s*$/.test(document.formularioContacto.nombre.value)){
msg += 'El nombre no puede estar formado por espacios';
nombre = false;
}else{
nombre = true;
}
var mensaje = document.getElementById('nombre').nextSibling;
mensaje.innerHTML = msg;
mensaje.setAttribute('class','campoErroneo');
}
function validarApellidos(){
var msg = '';
if (document.formularioContacto.apellidos.value.length > 30){
msg += 'Los apellidos deben tener menos de 30 caracteres';
apellidos = false;
}else if (document.formularioContacto.apellidos.value.length == 0 ){
msg += 'El campo apellidos está vacio';
apellidos = false;
}else if ( /^\s*$/.test(document.formularioContacto.apellidos.value)){
msg += 'Los apellidos no pueden estar formado por espacios';
apellidos = false;
}else{
apellidos = true;
}
var mensaje = document.getElementById('apellidos').nextSibling;
mensaje.innerHTML = msg;
mensaje.setAttribute('class','campoErroneo');
}
function validarEmail(){
var msg = '';
if (document.formularioContacto.email.value.length > 15){
msg += 'El email debe tener menos de 35 caracteres';
email = false;
}else if (document.formularioContacto.email.value.length == 0 ){
msg += 'El campo email está vacio';
email = false;
}else if ( /^\s*$/.test(document.formularioContacto.email.value)){
msg += 'El email no puede estar formado por espacios';
email = false;
}
else if ( !(/\S+@\S+\.\S+/.test(document.formularioContacto.email.value))){
msg += 'Escriba de nuevo un email correcto';
email = false;
}else{
email = true;
}
var mensaje = document.getElementById('email').nextSibling;
mensaje.innerHTML = msg;
mensaje.setAttribute('class','campoErroneo');
}
</script>
</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 onsubmit = "return validarDatos()" 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" /><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body></html>
Saludos!!!!
-
Hola bermartinv.
Tienes que revisar el código porque tiene algunas cosillas que no funcionan como deberían.
Cuando un campo toma el foco, se borra lo que estuviera escrito con anterioridad.
El campo email no acepta más de 15 caracteres.
Y viendo que en el tema se explica el uso de preventDefault(), vendría bien que lo usaras para probar su funcionamiento.
Saludos. ;D
-
Hola pedro,, por partes. No había usado preventDefault() porque era una de las maneras posibles. Respecto lo de los caracteres del email tienes razon se me pasó al hacer copia-pega. Otra cosa, lo del foco, lo había pensado así porque cuando uno entra en el foco de un campo normalmente es para modificarlo.
Ahora modificaré lo que me has comentado.
De todas maneras iba a poner un código nuevo que había hecho intentando no usar variables globales, que es mi punto débil.
<!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;margin:20px;}
.campoErroneo {
background-color: orange;
color : black;
margin-left: 10px;
}
</style>
<script>
window.onload=function(){
var formulario = document.formularioContacto;
for (var i = 0;i < formulario.elements.length;i++){
if (formulario.elements[i].type == 'text'){
formulario.elements[i].addEventListener('focus',estiloIn);
formulario.elements[i].addEventListener('blur',estiloOut);
}
}
formulario.nombre.focus();
}
function estiloIn(){
this.style.backgroundColor = 'lightgreen';
this.value = '';
this.nextSibling.innerHTML='';
this.nextSibling.removeAttribute('class','campoErroneo');
}
function estiloOut(){
this.style.backgroundColor = 'white';
}
function validarDatos(){
var formulario = document.formularioContacto;
var booleanNombre = false;
var booleanApellidos = false;
var booleanEmail = false;
booleanNombre = validarNombre(formulario);
booleanApellidos = validarApellidos(formulario);
booleanEmail =validarEmail(formulario);
if (booleanNombre && booleanApellidos && booleanEmail){
return true;
}else{
return false;
}
}
function validarNombre(formulario){
var valorNombre = formulario.nombre;
var msg = '';
if (valorNombre.value.length > 15){
msg += 'El nombre debe tener menos de 15 caracteres';
mensajeError(valorNombre,msg);
return false;
}else if (valorNombre.value.length == 0 ){
msg += 'El campo nombre está vacio';
mensajeError(valorNombre,msg);
return false;
}else if ( /^\s*$/.test(valorNombre.value)){
msg += 'El nombre no puede estar formado por espacios';
mensajeError(valorNombre,msg);
return false;
}else{
return true;
}
}
function validarApellidos(formulario){
var valorApellidos = formulario.apellidos;
var msg = '';
if (valorApellidos.value.length > 30){
msg += 'Los apellidos deben tener menos de 30 caracteres';
mensajeError(valorApellidos,msg);
return false;
}else if (valorApellidos.value.length == 0 ){
msg += 'El campo apellidos está vacio';
mensajeError(valorApellidos,msg);
return false;
}else if ( /^\s*$/.test(valorApellidos.value)){
msg += 'Los apellidos no pueden estar formado por espacios';
mensajeError(valorApellidos,msg);
return false;
}else{
return true;
}
}
function validarEmail(formulario){
var valorEmail = formulario.email;
var msg = '';
if (valorEmail.value.length > 15){
msg += 'El email debe tener menos de 35 caracteres';
mensajeError(valorEmail,msg);
return false;
}else if (valorEmail.value.length == 0 ){
msg += 'El campo email está vacio';
mensajeError(valorEmail,msg);
return false;
}else if ( /^\s*$/.test(valorEmail.value)){
msg += 'El email no puede estar formado por espacios';
mensajeError(valorEmail,msg);
return false;
}
else if ( !(/\S+@\S+\.\S+/.test(valorEmail.value))){
msg += 'Escriba de nuevo un email correcto';
mensajeError(valorEmail,msg);
return false;
}else{
return true;
}
}
function mensajeError(nodo,msg){
nodo.nextSibling.innerHTML = msg;
nodo.nextSibling.setAttribute('class','campoErroneo');
}
</script>
</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 onsubmit = "return validarDatos()" 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" /><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body></html>
-
Y ahora pedro,, con las modificacione que me dijiste
<!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;margin:20px;}
.campoErroneo {
background-color: orange;
color : black;
margin-left: 10px;
}
</style>
<script>
window.onload=function(){
var formulario = document.formularioContacto;
formulario.addEventListener('submit',validarDatos);
for (var i = 0;i < formulario.elements.length;i++){
if (formulario.elements[i].type == 'text'){
formulario.elements[i].addEventListener('focus',estiloIn);
formulario.elements[i].addEventListener('blur',estiloOut);
}
}
formulario.nombre.focus();
}
function estiloIn(){
this.style.backgroundColor = 'lightgreen';
this.nextSibling.innerHTML='';
this.nextSibling.removeAttribute('class','campoErroneo');
}
function estiloOut(){
this.style.backgroundColor = 'white';
}
function validarDatos(event){
event.preventDefault();
var formulario = document.formularioContacto;
var booleanNombre = false;
var booleanApellidos = false;
var booleanEmail = false;
booleanNombre = validarNombre(formulario);
booleanApellidos = validarApellidos(formulario);
booleanEmail =validarEmail(formulario);
if (booleanNombre && booleanApellidos && booleanEmail){
formulario.submit();
}
}
function validarNombre(formulario){
var valorNombre = formulario.nombre;
var msg = '';
if (valorNombre.value.length > 15){
msg += 'El nombre debe tener menos de 15 caracteres';
mensajeError(valorNombre,msg);
return false;
}else if (valorNombre.value.length == 0 ){
msg += 'El campo nombre está vacio';
mensajeError(valorNombre,msg);
return false;
}else if ( /^\s*$/.test(valorNombre.value)){
msg += 'El nombre no puede estar formado por espacios';
mensajeError(valorNombre,msg);
return false;
}else{
return true;
}
}
function validarApellidos(formulario){
var valorApellidos = formulario.apellidos;
var msg = '';
if (valorApellidos.value.length > 30){
msg += 'Los apellidos deben tener menos de 30 caracteres';
mensajeError(valorApellidos,msg);
return false;
}else if (valorApellidos.value.length == 0 ){
msg += 'El campo apellidos está vacio';
mensajeError(valorApellidos,msg);
return false;
}else if ( /^\s*$/.test(valorApellidos.value)){
msg += 'Los apellidos no pueden estar formado por espacios';
mensajeError(valorApellidos,msg);
return false;
}else{
return true;
}
}
function validarEmail(formulario){
var valorEmail = formulario.email;
var msg = '';
if (valorEmail.value.length > 35){
msg += 'El email debe tener menos de 35 caracteres';
mensajeError(valorEmail,msg);
return false;
}else if (valorEmail.value.length == 0 ){
msg += 'El campo email está vacio';
mensajeError(valorEmail,msg);
return false;
}else if ( /^\s*$/.test(valorEmail.value)){
msg += 'El email no puede estar formado por espacios';
mensajeError(valorEmail,msg);
return false;
}
else if ( !(/\S+@\S+\.\S+/.test(valorEmail.value))){
msg += 'Escriba de nuevo un email correcto';
mensajeError(valorEmail,msg);
return false;
}else{
return true;
}
}
function mensajeError(nodo,msg){
nodo.nextSibling.innerHTML = msg;
nodo.nextSibling.setAttribute('class','campoErroneo');
}
</script>
</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" /><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body></html>
Gracias pedro,, por tu tiempo
-
Como te dije ante solo eran 'cosillas'.
Lo de no borrar el campo cuando coge el foco, es para poder tener la opción de rectificar lo que se halla escrito sin tener que escribirlo entero otra vez.
Solucionaste bien lo de las variables con ámbito global.
Ahora lo tienes todo perfecto.
Saludos. ;D
-
Lo dicho pedro,, gracias por tu tiempo y agradezco tus críticas y opiniones ya sean positivas o negativas, son la manera de aprender. ;)