Problema estilos formulario dinamico

nolose · #1 (**permalink**) 24/06/2009, 18:52

Buenas noches

Tengo un problema con un formulario de validación en javascript. El formulario esta compuesto por varios campos de texto de un color blanco y cambian de color cuando le damos al submit y algun campo esta mal.

Pues bien, me gustaría saber como hacer para que si el campo se cambia y esta correcto, se quite el color que corresponde al error, sin tener que hacer clic en en el submit.

Dejo aqui abajo el codigo, tambien podeis ver un ejemplo funcionando en www.reddelsur.org/contactar_form.php

Gracias, espero sus respuestas
Saludos

nolose · #2 (**permalink**) 24/06/2009, 18:53

Código HTML:

<html> 
<head>
<title>[ contactar ]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<link rel="stylesheet" type="text/css" href="style.css"> 
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
	margin-bottom: 40px;
	margin-left: 0px;
	margin-top: 40px;
	margin-right: 0px;
}
-->
</style>

<script language="javascript" type="text/javascript">

function $(id){
return document.getElementById(id);
}

function vacio(cadena)
{                                      // DECLARACION DE CONSTANTES
    var blanco = " \n\t" + String.fromCharCode(13); // blancos
                                       // DECLARACION DE VARIABLES
    var i;                             // indice en cadena
    var es_vacio;                      // cadena es vacio o no
    for(i = 0, es_vacio = true; (i < cadena.length) && es_vacio; i++) // INICIO
      es_vacio = blanco.indexOf(cadena.charAt(i)) != - 1;
    return(es_vacio);
}

function valida_imagen(codigo){

	var validacion=0;
		
	if(vacio(f1.nombre.value)) 
    {
		document.f1.nombre.style.backgroundColor = "#f6c9dd";// color defecto  #f6c9dd resaltado d5006e
		document.f1.nombre.style.borderStyle = "solid";
		document.f1.nombre.style.borderColor = "#d5006e";
		document.f1.nombre.style.borderWidth = "1px";
		$('errornombre').style.display='block';
		validacion=1;
    }
	else
	{
		document.f1.nombre.style.backgroundColor = "#FFFFFF";// color defecto  #f6c9dd resaltado d5006e
		document.f1.nombre.style.borderStyle = "solid";
		document.f1.nombre.style.borderColor = "#000000";
		document.f1.nombre.style.borderWidth = "1px";
		validacion=0;
	}
	
	if((vacio(f1.email.value)) || (document.f1.email.value.indexOf('@') == -1))
    {
		document.f1.email.style.backgroundColor = "#f6c9dd";// color defecto  #f6c9dd resaltado d5006e
		document.f1.email.style.borderStyle = "solid";
		document.f1.email.style.borderColor = "#d5006e";
		document.f1.email.style.borderWidth = "1px";
		$('erroremail').style.display='block';
		validacion=1;
    }
	else
	{
		document.f1.email.style.backgroundColor = "#FFFFFF";// color defecto  #f6c9dd resaltado d5006e
		document.f1.email.style.borderStyle = "solid";
		document.f1.email.style.borderColor = "#000000";
		document.f1.email.style.borderWidth = "1px";
	}
	
	if(vacio(f1.asunto.value)) 
    {
        document.f1.asunto.style.backgroundColor = "#f6c9dd";// color defecto  #f6c9dd resaltado d5006e
		document.f1.asunto.style.borderStyle = "solid";
		document.f1.asunto.style.borderColor = "#d5006e";
		document.f1.asunto.style.borderWidth = "1px";
		$('errorasunto').style.display='block';
		validacion=1;
    }
	else
	{
		document.f1.asunto.style.backgroundColor = "#FFFFFF";// color defecto  #f6c9dd resaltado d5006e
		document.f1.asunto.style.borderStyle = "solid";
		document.f1.asunto.style.borderColor = "#000000";
		document.f1.asunto.style.borderWidth = "1px";
	}
	
	if(vacio(f1.mensaje.value)) 
    {
        document.f1.mensaje.style.backgroundColor = "#f6c9dd";// color defecto  #f6c9dd resaltado d5006e
		document.f1.mensaje.style.borderStyle = "solid";
		document.f1.mensaje.style.borderColor = "#d5006e";
		document.f1.mensaje.style.borderWidth = "1px";
		$('errormensaje').style.display='block';
		validacion=1;
    }
	else
	{
		document.f1.mensaje.style.backgroundColor = "#FFFFFF";// color defecto  #f6c9dd resaltado d5006e
		document.f1.mensaje.style.borderStyle = "solid";
		document.f1.mensaje.style.borderColor = "#000000";
		document.f1.mensaje.style.borderWidth = "1px";
	}
		
	if(document.getElementById('seccion').value == "nulo")
	{
		document.f1.seccion.style.backgroundColor = "#f6c9dd";// color defecto  #f6c9dd resaltado d5006e
		document.f1.seccion.style.borderStyle = "solid";
		document.f1.seccion.style.borderColor = "#d5006e";
		document.f1.seccion.style.borderWidth = "1px";
		$('errorseccion').style.display='block';
		validacion=1;
	}
	else
	{
		document.f1.seccion.style.backgroundColor = "#FFFFFF";// color defecto  #f6c9dd resaltado d5006e
		document.f1.seccion.style.borderStyle = "solid";
		document.f1.seccion.style.borderColor = "#000000";
		document.f1.seccion.style.borderWidth = "1px";
	}


	
	if(validacion==1)
		return false;
	else
		return true;
	
	
}
</script>

</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" align="left" valign="top"><form name=f1 action="procesa.php" method="post" onSubmit="return valida_imagen(this)">
      <table width="440" border="0" cellspacing="0" cellpadding="0">
        
        <tr>
          <td><table width="440" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td style="padding-top:26px" width="82%" align="left" class="cssnegro"><strong class="css_gris">Nombre:</strong><span class="csslogo_naranja">*</span><br>
                      <input name="nombre" type="text" id="nombre" size="40" maxlength="45" onChange="$('errornombre').style.display='none'">
                <div id="errornombre" style="display:none" class="css_rojo">Debe notificar su nombre</div></td>
            </tr>
            <tr>
              <td style="padding-top:12px" align="left" class="cssnegro"><strong class="css_gris">E-Mail:</strong><span class="csslogo_naranja">*</span><br>
                      <input name="email" type="text" id="email" size="40" maxlength="45" onChange="$('erroremail').style.display='none'">
                <div id="erroremail" style="display:none"class="css_rojo">Debe notificar un email v&aacute;lido</div></td>
            </tr>
            <tr>
              <td style="padding-top:12px" align="left" class="cssnegro"><strong class="css_gris">Asunto:</strong><span class="csslogo_naranja">*</span><br>
                      <input name="asunto" type="text" id="asunto" size="40" maxlength="45" onChange="$('errorasunto').style.display='none'">
                <div id="errorasunto" style="display:none" class="css_rojo">Debe notificar su asunto</div></td>
            </tr>
            <tr>
              <td style="padding-top:12px" align="left" class="cssnegro"><strong class="css_gris">Mensaje:</strong><span class="csslogo_naranja">*</span><br>
                      <textarea name="mensaje" type="text" id="mensaje" size="40" maxlength="45" onChange="$('errormensaje').style.display='none'"></textarea>
                <div id="errormensaje" style="display:none" class="css_rojo">Debe notificar su mensaje</div></td>
            </tr>
            <tr>
              <td style="padding-top:15px" align="left" class="cssnegro"><span class="css_gris"><strong>Secci&oacute;n:</strong></span><br>
                      <select name="seccion" id="seccion" onChange="$('errorseccion').style.display='none'">
                        <option value="nulo" selected>Seleccione una secci&oacute;n</option>
                        <option value="Consulta sobre facturacion y/o precios">Consulta sobre facturaci&oacute;n y/o precios</option>
                        <option value="Consulta de caracter general y/o comercial">Consulta de caracter general y/o comercial</option>
                        <option value="Ayuda para contratar un servicio en nuestra web">Ayuda para contratar un servicio en nuestra web</option>
                        <option value="Soporte tecnico sobre un servicio contratado">Soporte t&eacute;cnico sobre un servicio contratado</option>
                        <option value="Otras consultas">Otras consultas</option>
                      </select>
                      <div id="errorseccion" style="display:none" class="css_rojo">Debe elegir una seccion</div></td>
            </tr>
            <tr>
              <td style="padding-top:26px" align="left"><input name="contacto" type="submit" value="Enviar">
                      <input type="hidden" name="codigo" id="codigo" value="<? echo $_SESSION['spamkey']; ?>"></td>
            </tr>
            <tr>
              <td align="left" class="css_gris" style="padding-top:15px"><strong>Los campos con </strong><span class="csslogo_naranja">*</span><strong> son obligatorios. </strong></td>
            </tr>
          </table></td>
        </tr>
      </table>
    </form></td>
  </tr>
</table>
</body>
</html>

David · #3 (**permalink**) 24/06/2009, 19:36

Puedes realizar las validaciones en el evento onkeypress de los campos (para que cambie al escribir) o en el evento onblur (al perder el foco)

caricatos · #4 (**permalink**) 25/06/2009, 02:18

Hola:

Tema movido desde Ajax.

nolose · #5 (**permalink**) 25/06/2009, 06:14

David muchas gracias, lo he puesto como onkeypress y va mucho mejor ;)