14/02/2008, 15:36
| ||||
| ||||
 Validando Formulario con Div!! Saludos amigos, Tengo una duda, estoy validando un formulario pero me he dado cuenta de que los tipicos ALERT ya est como pasados a la antigua... Entonces quisiera saber si alguien sabe como validar formularios con DIV, de este tipo: Como el Registro en Yahoo Les agradeceria muchisimo si me pudieran ayudar!! Editando: Colocandole imagenes, o cambiandole el fondo a la celda, etc.... |
|
15/02/2008, 01:16
| ||||
| ||||
| Re: Validando Formulario con Div!! Espero que esto te sirva
Código:
Un saludo! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
.izquierda{
float:left;
position:Relative;
}
#formulario{
border:solid 1px black;
width:170px;
padding:10px;
text-align:right;
}
input{
border:solid 1px black;
}
#avisos{
background-color:#efefef;
display:none;
margin-left:10px;
padding:10px;
border:solid 1px black;
}
*{
font:normal 10px/15px verdana;
}
</style>
<script>
colorMal="#ffff99";
colorBien="ffffff";
function validar(f){
mensaje="";
for(a=0;a<f.elements.length;a++){
if(f[a].type=="text" && f[a].value==""){
f[a].style.backgroundColor=colorMal; //Pone el color de fondo de error en el campo
mensaje+="El campo "+f[a].name+" no puede quedar vacío.<br />"; //Añade texto al mensaje que aparecerá
}
else{
f[a].style.backgroundColor=colorBien; //Pone el color normal al campo que está bien
}
}
if(mensaje!=""){ //La variable mensaje sólo estará vacía si no hay ningún fallo
document.getElementById("avisos").innerHTML="Por favor, corrija los siguientes errores:<br />"+mensaje+" Muchas gracias." //Se introduce el texto en la capa de alertas
document.getElementById("avisos").style.display='block'; //Hacemos que aparezca la capa de alertas
return false;
}
else{
document.getElementById("avisos").style.display='none'; //Si no hay fallos la oculta
}
}
</script>
</head>
<body><div class="izquierda" id="formulario">
<form action="javascript:alert('Esta todo bien!');" onsubmit="return validar(this)">
Nombre:<input type="text" name="nombre" id="nombre" /><br />
Edad:<input type="text" name="edad" id="edad" /><br />
<input type="submit" name="mandar" id="mandar" value="Enviar" />
</div>
<div class="izquierda" id="avisos"></div>
</body>
</html>
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
15/02/2008, 09:24
| ||||
| ||||
| Re: Validando Formulario con Div!! Holas, creo que [PedroJTR], se referia a algo asi...
Código:
Tendrias que adaptarlo a tus necesidades, y claro reducir el codigo javascript pues si tienes varios campos, habran muchos if....<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>.:: Vaidacion CSS ::.</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
.mal{
background-color: #F08080;
/*background-color:"#00FF00";*/
border:1px solid red;
}
</style>
<script type="text/javascript">
function valida(){
if(document.getElementById('nombre').value==''){
document.getElementById('nombre').className='mal';
return -1;
}else{
document.getElementById('nombre').className='';
}
if(document.getElementById('apellido').value==''){
document.getElementById('apellido').className='mal';
return -1;
}else{
document.getElementById('nombre').className='';
}
alert("Todo Ok");
}
</script>
<body>
<input type="text" name="nombre" id="nombre" /><br />
<input type="text" name="apellido" id="apellido" /><br />
<input type="button" name="valida" value="valida" onclick="valida()" />
</body>
</html>
__________________ Un Caballero Jura Lealtad. Usa su espada para suprimir la Injusticia No Conoce el Odio y Tampoco el AMOR... |
|
15/02/2008, 09:37
| ||||
| ||||
| Re: Validando Formulario con Div!! Uy... Creo que no me entendi comapeñero... Quiero que la validacion se haga sin darle al boton de enviar... Y que no me salgan ALERTS!!!! Asi como el registro en YAhoo... |
|
15/02/2008, 09:39
| ||||
| ||||
| Re: Validando Formulario con Div!! Cita: Exacto amigo... Gracias...
Iniciado por Bellenger  Holas, creo que [PedroJTR], se referia a algo asi...
Código:
Tendrias que adaptarlo a tus necesidades, y claro reducir el codigo javascript pues si tienes varios campos, habran muchos if....<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>.:: Vaidacion CSS ::.</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
.mal{
background-color: #F08080;
/*background-color:"#00FF00";*/
border:1px solid red;
}
</style>
<script type="text/javascript">
function valida(){
if(document.getElementById('nombre').value==''){
document.getElementById('nombre').className='mal';
return -1;
}else{
document.getElementById('nombre').className='';
}
if(document.getElementById('apellido').value==''){
document.getElementById('apellido').className='mal';
return -1;
}else{
document.getElementById('nombre').className='';
}
alert("Todo Ok");
}
</script>
<body>
<input type="text" name="nombre" id="nombre" /><br />
<input type="text" name="apellido" id="apellido" /><br />
<input type="button" name="valida" value="valida" onclick="valida()" />
</body>
</html>
Y no se pudiera hacer asi como el registro en Yahoo??? Sin darle al boton enviar si no al dirigirse al siguiente campo? |
|
15/02/2008, 09:44
| ||||
| ||||
| Re: Validando Formulario con Div!! Tendrias que programar el input, utilizando el evento onfocus...
__________________ Un Caballero Jura Lealtad. Usa su espada para suprimir la Injusticia No Conoce el Odio y Tampoco el AMOR... |
|
15/02/2008, 09:50
| ||||
| ||||
| Re: Validando Formulario con Div!! Cita: Oh, y me podrías ayudar en eso?
Iniciado por Bellenger Tendrias que programar el input, utilizando el evento onfocus...  Jamás he trabajado JS con CSS!!! |
|
15/02/2008, 10:17
| ||||
| ||||
| Re: Validando Formulario con Div!! Revisa esta web:http://www.librosweb.es/ existen muy buenos manuales, solo hay que tomarse la molestia de buscar un poco...
__________________ Un Caballero Jura Lealtad. Usa su espada para suprimir la Injusticia No Conoce el Odio y Tampoco el AMOR... |
|
15/02/2008, 11:53
| ||||
| ||||
| Re: Validando Formulario con Div!! Cita: Gracias
Iniciado por Bellenger Revisa esta web:http://www.librosweb.es/ existen muy buenos manuales, solo hay que tomarse la molestia de buscar un poco...  Bellenger... Muy Amable de tu parte!!!! Saludos,... |
