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>
Tema: JavaScript Validacion formulario blur, focus, submit addEventListener CU01182E (Leído 6936 veces)
RSS -
WAP2