Hola. Os paso mi ejercicio CU01182E del taller práctico de programación web con JavaScript. Gracias a todos.
Un saludo.
<!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;}
.error{display:none; border:solid 1px; background-color:orange; margin-left:10px;}
</style>
<script type="text/javascript">
window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
function validarFormulario(evObject) {
evObject.preventDefault();
var formulario = document.formularioContacto;
var a=false;
var b=false;
var c=false;
a=comprobarNombre(formulario.nombre);
b=comprobarApellidos(formulario.apellidos);
c=comprobarEmail(formulario.email);
if(a && b && c){
formulario.submit();
}
}
function mensajeError(nodo,numero,n){
nodo.nextSibling.style.display = 'inline';
var mensaje=['El campo '+nodo.name+' no puede estar vacio','El campo '+nodo.name+' demasiado largo. Máximo '+n+' caracteres','Falta la @'];
nodo.nextSibling.textContent = mensaje[numero];
}
function ocultarMsg(nodo){
nodo.nextSibling.style.display = 'none';
}
function comprobarNombre(nombre){
var num=15;
if(nombre.value == null || nombre.value.length == 0 || /^\s*$/.test(nombre.value)){
mensajeError(nombre,0);
return false;
}else if(nombre.value.length > 15){
mensajeError(nombre,1,15);
return false;
}else{
ocultarMsg(nombre);
return true;
}
}
function comprobarApellidos(apellidos){
if(apellidos.value == null || apellidos.value.length == 0 || /^\s*$/.test(apellidos.value)){
mensajeError(apellidos,0);
return false;
}else if(apellidos.value.length > 30){
mensajeError(apellidos,1,30);
return false;
}else{
ocultarMsg(apellidos);
return true;
}
}
function comprobarEmail(email){
if(email.value == null || email.value.length == 0 || /^\s*$/.test(email.value)){
mensajeError(email,0);
return false;
}else if(email.value.length > 35){
mensajeError(email,1,35);
return false;
}else if(!/[@]/.test(email.value)){
mensajeError(email,2);
return false;
}else{
ocultarMsg(email);
return true;
}
}
</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 class="error"></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /><span class="error"></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /><span class="error"></span></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</body>
</html>
Tema: Javascript Validar formularios comprobar campos no vacios. Ejercicio CU01182E# (Leído 2081 veces)
RSS -
WAP2