Si eres usuario
Ingresa aquí »
¿Eres nuevo?
Regístrate
  • Google
  • Artículos
  • Foros
  • Fotos
  • Videos
  • Amigos
Estás en: Inicio / Foros / Informática / Webmasters
Webmasters »

Validacion de datos con javascript

Participa en el tema Validacion de datos con javascript en el foro Webmasters.
Hola gente, tengo el siguiente inconveniente. Estoy validando un formulario y lo que quiero hacer ...
0votos

Respuesta
 
LinkBack Herramientas Buscar en este tema
Monito
Validacion de datos con javascript
Hola gente, tengo el siguiente inconveniente. Estoy validando un formulario y lo que quiero hacer es, que al pasar el foco a otro campo del formulario me valide lo que ingresé en el campo y si es correcto, que me muestre un icono en verde al lado del campo de texto, en caso que no sea correcto me muestre u icono en rojo.
En estos momentos lo que estoy haciendo es poner un borde rojo y verde según pasa el test o no. Pero no se como hacer esto.

EL código es

HTML

<form action="mail.php" method="post">
<p>*Nombre y Apellido:
<input id="nombre" onblur="validarNombre(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 43px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="nombre" />
</p>
<p>*Correo electrónico:
<input id="email" onblur="validarEmail(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 45px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="email" />
</p>
<input class="boton" onclick="return validarCampos(this.form)" type="submit" value="Enviar" name="button" />
</form>

y el .js es

function validarNombre (form) {
var n= form.nombre.value;
if (n == "" ){
form.nombre.style.border = "1px solid red";
}
else{
form.nombre.style.border = "1px solid green";
}
}

Desde ya muchas gracias por su ayuda.
Debes registrarte para responder
Poronga Member
Re: Validacion de datos con javascript
Se borraron las otras dos respuestas

Que es lo que no podes hacer? Que muestre el icono correspondiende segun sea o no valido?
Debes registrarte para responder
sphinx
Re: Validacion de datos con javascript
Como yo lo veo es muy parecido a lo que estás haciendo ahora.

Podrías poner un IMG al lado de cada input, y dependiendo del resultado de la validación por javascript, podés ajustar el src y la propiedad css display.

Te dejo algo de código a modo de ejemplo, vos ajustalo como mejor te venga.

JS
Código:
function validarNombre (form) {
    var n = form.nombre.value;
    var imagen = document.getElementById('imgValNombre');
    
    if (n == "" ){
        form.nombre.style.border = "1px solid red";
        imagen.src = 'button_cancel.png';
    }
    else
    {
        form.nombre.style.border = "1px solid green";
        imagen.src = 'button_ok.png';    
    }
    imagen.style.display = 'block';
}
</script>
HTML
Código:
    <form action="mail.php" method="post">
        <p>*Nombre y Apellido:
            <input id="nombre" onblur="validarNombre(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 43px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="nombre" /><img id="imgValNombre" style="display:none;" src="" alt="" />
        </p>
        <p>*Correo electrónico:
            <input id="email" onblur="validarEmail(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 45px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="email" />
        </p>
        
        <input class="boton" onclick="return validarCampos(this.form)" type="submit" value="Enviar" name="button" />
    </form>
¡Saludos!
Debes registrarte para responder
Poronga Member
Re: Validacion de datos con javascript
Yo lo intente hacer con un div con getElementById y no me anduvo

Pero menos mal que Lucas te respondio :P

Saludos y suerte!

Edit: me salio :P


JS
Código:
  
<script type="text/javascript">
function validarNombre () {
var n= document.jorge.nombre.value;
var i= document.getElementById("icono");
if (n == "" ){
i.style.background="url('no_valido.gif')";
}
else{
i.style.background="url('valido.gif')";
}
}
</script>
HTML

Código:
<form action="mail.php" method="post" name="jorge">
<p>*Nombre y Apellido:
<input id="nombre" onblur="validarNombre()" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 43px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;" maxlength="50" size="40" name="nombre" /><div id="icono"></div>
</p>
<p>*Correo electrónico:
<input id="email" onblur="validarEmail()" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 45px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;" maxlength="50" size="40" name="email" />
</p>
<input class="boton" onclick="return validarCampos()" type="submit" value="Enviar" name="button" />
</form>
Editado por MartinMerza - 13.01.2009 01:39 hs..
Debes registrarte para responder
Monito
Re: Validacion de datos con javascript
Muchas gracias a los dos, al final lo hice con un div.
Si quieren ver como quedó el formulario está en http://www.hockeyvictoria.com.ar/Contacto.htm

JS
Código:
 
 
function validarNombre (form) 
{
var n= form.nombre.value;
if( vacio(n) == false ) 
{
document.getElementById("errornombre").style.display="block";
document.getElementById("oknombre").style.display="none";
document.getElementById("errornombre").title="Debe ingresar un nombre";
}
else{
document.getElementById("errornombre").style.display="none";
document.getElementById("oknombre").style.display="block";
}
}
HTML
Código:
 
<form action="mail.php" method="post"> 
<p>*Nombre y Apellido: <input id="nombre" onblur="validarNombre(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 43px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="nombre" /> <div id="oknombre"></div><div id="errornombre"></div> </p>
 <p>*Correo electrónico: <input id="email" onblur="validarEmail(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 45px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="email" /><div id="okemail"></div><div id="erroremail"></div> </p> 
<p>*Mensaje:<br> <textarea id="textarea1" onblur="validarMensaje(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 176px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" name="mensaje" rows="5" cols="45"></textarea><div id="oktextarea"></div><div id="errortextarea"></div> </p> 
<br /> <br /> <input class="boton" onclick="return validarCampos(this.form)" type="submit" value="Enviar" name="button" /> 
</form>
Ahora si, muchas gracias Lukillas
Editado por rafaeleliasw - 13.01.2009 17:26 hs..
Debes registrarte para responder
sphinx
Re: Validacion de datos con javascript
Tenés que ponerlo entre los tags [code][*/code]

(sin el asterico).

Fijate de tabular tu código así se te hace más fácil para leerlo después
Debes registrarte para responder
 
Respuesta

Webmasters» Validacion de datos con javascript


« Tema anterior | Siguiente tema »
Herramientas Buscar en este tema
Buscar en este tema:

Búsqueda avanzada
Califica este tema
Califica este tema:


Este tema está relacionado con otros ya publicados en el sitio. Podés visitarlos ahora!
Tema Iniciado por Foro Resp. Último mensaje
C/C++ Ayuda con funcion de validacion de datos Killerspam007 Programación 5 16.12.2008 07:00 hs.
programa de validacion de datos PALSAUDADE Programación 9 18.12.2007 01:33 hs.
javascript y bases de datos sikamikan Desarrollo Web 3 17.07.2007 15:51 hs.
[Javascript] validacion de formularios Just D Desarrollo Web 3 17.02.2006 15:18 hs.
Datos PoetaCamba Humor 8 06.08.2002 14:55 hs.

Ranking de temas y usuarios de este foro
Temas populares Usuarios más activos
• hermenejildo
• federg
• splashh
• stein01
• quebien


 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
CertificaIAB
{{diadelamigo}}