Una comprobacion total

patilanz · #1 (**permalink**) 15/08/2012, 08:18

Hola como hacer una comprobación de unos campos en el momento de escribir y si esta mal muestre una capa oculta que tiene dentro el mensaje del error y según avanza el usuario en los campos si esta mal muestre el mensaje de error. Cuando el usuario lo corrige se quita el mensaje de error y si están corregidos todos los campos se quita la capa . Luego si de nuevo aparece el error que de nuevo aparesca la capa .

Yo intente creando varios codigos diferentes ... pero no consigo que se quite el error en el momento de ser corregido ....

Alguna idea o algún tutorial para hacer comprobaciones con javascript?

Gracias :)

Si necesitan mis códigos que salieron mal digan me lo pls

Dradi7 · #2 (**permalink**) 15/08/2012, 08:22

Mira este ejemplo claro que se trabaja con JQuery

http://jquery.bassistance.de/validate/demo/

emprear · #3 (**permalink**) 15/08/2012, 08:57

Podés hacerlo sin recurrir a una librería, para campos de texto lo ideal es utilizar el evento onkeyup

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>validar entero</title>
<script type="text/javascript">
//<![CDATA[
function validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarEntero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
document.getElementById('mensaje').innerHTML = 'Debe ingresar un número entero';
}else{
document.getElementById('mensaje').innerHTML = '';
}
}
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" id="pregunta" name="pregunta" value="" onkeyup="validar(this.id);" /><br />
<input type="text" id="pregunta2" name="pregunta2" value="" onkeyup="validar(this.id);" /><br /><br />
<input type="submit" value="procesar" /><br /><br />
</form>
<div id="mensaje"></div>
</body>
</html>

Dependiendo de lo que deba contener el campo (numeros, letras, rangos, etc) deberás cear los condicionales necesarios

SAludos

patilanz · #4 (**permalink**) 15/08/2012, 13:21

Cita:

Iniciado por emprear

Podés hacerlo sin recurrir a una librería, para campos de texto lo ideal es utilizar el evento onkeyup

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>validar entero</title>
<script type="text/javascript">
//<![CDATA[
function validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarEntero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
document.getElementById('mensaje').innerHTML = 'Debe ingresar un número entero';
}else{
document.getElementById('mensaje').innerHTML = '';
}
}
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" id="pregunta" name="pregunta" value="" onkeyup="validar(this.id);" /><br />
<input type="text" id="pregunta2" name="pregunta2" value="" onkeyup="validar(this.id);" /><br /><br />
<input type="submit" value="procesar" /><br /><br />
</form>
<div id="mensaje"></div>
</body>
</html>

Dependiendo de lo que deba contener el campo (numeros, letras, rangos, etc) deberás cear los condicionales necesarios

SAludos

Gracias por tu respuesta pero tengo una pregunta.

Si lo que quiero es mostrar diferentes errores a varios campos de texto al usar:

document.getElementById('mensaje').innerHTML = 'Debe ingresar un número entero';

Luego al quitar el error :
else{
document.getElementById('mensaje').innerHTML = '';
}

Si hay mas errores ellos tambien se quitaran :(

Lo podria hacer con una matriz? De modo si pongo asi :

var errores = Array;

//funciones .... con sus mensajes de error

errores[0] = 'mensaje';

//....
errores[1] = 'mensaje2';
...

Y luego para poner lo al <div> puedo usar :

$var poner = errores[0] + errores[1] + errores[2] ....;

Y luego para quitar el error simplemente ago :

errores[0] = null; O errores[0] = '';

Cual de los dos metodos seria mejor ? el null o las comillas?

Se podia crear como lo dije??

Gracias :)

patilanz · #5 (**permalink**) 15/08/2012, 13:55

Hola cree el siguiente codigo :

Código Javascript:

Ver originalfunction comprobar_envio() {
    var n = form.name.value;
    var e = form.email.value;
    var p = form.phone.value;
    var t = form.tema.value;
    var m = form.message.value; 
    var errores = Array;
    if(n.length > 0) {
        if(isNaN(n)) {
            errores[0] = '<font color="red" size="4">Nombre invalido!</font><br />';
        } else {
            errores[0] = null;  
        }
        
    } else {
        errores[0] = null;  
    }
    if(e.length > 0) {
        if(comprobar_envio()) {
            errores[1] = '<font color="red" size="4">El correo es invalido!</font><br />';  
        } else {
            errores[1] = null;  
        }
    
    } else {
        errores[1] = null;
    }
    if(p.length > 0) {
        if(/^([0-9]{3} ){2}([0-9]{3})$/.test(p) || /^[0-9]{9}$/.test(p) || /^(([0-9]{3})-){2}([0-9]{3})$/.test(p)) {
            errores[2] = null;  
        } else {
            errores[2] = '<font color="red" size="4">El teléfono es invalido!</font><br />';    
        }
    } else { errores[2] = null; }
    
    if(t.length > 0) {
        if(t.length < 4) {
            errores[3] = '<font color="red" size="4">El tema es demasiado corta!</font><br />'; 
        } else {
            errores[3] = null;  
        }
    } else {
        errores[3] = null;  
    }
    if(m.length > 0) {
        if(m.length < 10) {
            errores[4] = '<font color="red" size="4">Mensaje demasiado corto!</font>';  
        } else {
        errores[4] = null;  
        }
    }else {errores[4] = null;}
    return errores;
}
function enviar() {
    if(comprobar_envio()) {
        d = document.getElementById('errores');
        d.style.opacity = '0.9';
        d.style.height = '169px';
        var e = comprobar_envio();
        e = errores[0] + errores[1] + errores[2] + errores[3] + errores[4]; 
        d.innerHTML = e;
    } else {
        d = document.getElementById('errores');
        d.style.height = '28px';
        d.style.opacity = '0.01';   
    }
        
    
    
}

Pero siempre me develve 'Nan' es decir cando aparece el smap con id=errores me sale escrito 'NaN'

No consigo crear lo ...
Alguna ayuda?

emprear · #6 (**permalink**) 15/08/2012, 14:08

El problema es que stas trabajando supuestamente con un evento onkeyup sobre cada campo en particular, en ese caso, lo que tendrías que hacer es una capa (puede ser un input extra sin bordes) para mensajes de error para cada elemento

ejemplo

Código HTML:

Ver original<input type="text" id="pregunta" name="pregunta" value="" onkeyup="validar(this.id);" /> <span id="error_pregunta"></span><br />
<input type="text" id="pregunta2" name="pregunta2" value="" onkeyup="validar(this.id);" /> <span id="error_pregunta2"></span><br /><br />

fijate los id de los span, con eso podés hacer dinámico la designación del elemento construyendo el id con el valor campo(que es el id) pasado a la función

Código Javascript:

Ver originaldocument.getElementById('error_'+campo).innerHTML = 'Debe ingresar un número entero';

Cuando son forms mas complejos, con inputs de text, selects, radio, checkboxes, etc, yo prefiero esto ya pasar todos los errrores juntos

primero inicializás unas variables

Código Javascript:

Ver originalvar mensajes = "";
var error ="";
 
//luego, ante cada condición (supongamos que el else es para el error)
 
if(....){
// ok
}else{
error = "si";
mensajes += "falta nombre...<br>"
}
 
if(....){
// ok
}else{
error = "si";
mensajes += "falta apellido...<br>"
}
 
if(....){
// ok
}else{
error = "si";
mensajes += "seleccione un pais<br>"
}
 
// ante cualquier error producido la variable error ya no estaria vacia
// entonces
 
if(error !== ""){
document.getElementById('mensaje').innerHTML = mensajes;
return false; // evitás el submit
}

y la función de validación la llamo con

Código HTML:

Ver original<form action="x.php" onsubmit="return validar()">

olvidándome del onkeyup

Espero haberme explicado
Saludos