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 ...

Buscar en este tema:
Búsqueda avanzada
Respuesta
 
  • desconectado

    • 20

      MENSAJES

     
    rafaeleliasw escribió hace 11 meses
     
    ¿Mensaje inapropiado?
    #1 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.

    Responder a este tema

    Citar

    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/webmasters.319/881914-validacion-de-datos-con-javascript.html
    | Más
  • desconectado

    • 291

      MENSAJES

    MartinMerza escribió hace 11 meses ¿Mensaje inapropiado?

    #2 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?

    Responder

    Citar

    Me gusta este mensaje
  •  
    desconectado

    • 26,184

      MENSAJES

    Lukillas escribió hace 11 meses ¿Mensaje inapropiado?

    #3 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!

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 291

      MENSAJES

    MartinMerza escribió hace 11 meses ¿Mensaje inapropiado?

    #4 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.

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 20

      MENSAJES

    rafaeleliasw escribió hace 11 meses ¿Mensaje inapropiado?

    #5 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.

    Responder

    Citar

    Me gusta este mensaje
  •  
    desconectado

    • 26,184

      MENSAJES

    Lukillas escribió hace 11 meses ¿Mensaje inapropiado?

    #6 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

    Responder

    Citar

    Me gusta este mensaje
Estás en: Inicio >> Foros >> Informática >> Webmasters


Estadísticas del tema
  • 5 RESPUESTAS
  • 2329 VISTAS
  • 3 USUARIOS RESPONDIERON
 
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
Certifica IAB