validacion de campos de texto

[pedrolp]

Hola bueno me gustaria que me ayuden con una validacion de campos, es decir, quisiera comparar 2 campos de texto, como se usan por ejm en registros donde ingresas 2 veces tu contraseña... tengo el siguiente codigo:

Código HTML:

<form name="fomulario" method="post" action="respuesta.php">
valor1
<input type="text" name="campo1" id="campo1">
<br />
valor2
<input type="text" name="campo2" id="campos2">
<br />
valor3
<input type="text" name="campo3" id="campos3">
<br />
<input type="submit" name="enviar" value="Enviar">
</form> 

quisiera comparar los valores 1 y 2 (para que sean iguales) y si me pudieran decir tambien cual es el evento necesario a utilizar para que cuando cambie del valor 2 al 3 (haciendo clic o tab por ejm) me diga que los valores 1 y 2 son diferentes (en caso sea asi).. se que se hace con javascript, pero no conosco mucho aun sobre este lenguaje, solo cosas basicas... si me pudieran ayudar con esto. Gracias

PD: quisiera saber que navegadores soportan bien el javascript pues se que mozilla no los interpreta bien... me gustaria saber que opinion tienen al respecto y que navegadores me recomiendan (ahora estoy usando Mozilla Firefox y Google Chrome)

[jackson666]

Los navegadores que nombraste, interpretan perfectamente el codigo javascript. Esta en vos hacerlo compatible con TODOS los navegadores!
En cuanto a lo que necesitas:

Código HTML:

<form name="fomulario" method="post" action="respuesta.php">

<input type="text" name="campo1" id="campo1" onblur="valida(this.value);" />
<br />

<input type="text" name="campo2" id="campos2" onblur="valida(this.value);" />
<br />

<input type="text" name="campo3" id="campos3" />
<br />

<input type="submit" name="enviar" value="Enviar" />
</form> 

Y el javascript:

Código Javascript:

<script type="text/javascript">
var campo = null;
 
function valida(val){
 
    if(campo != null){
        if(campo != val){ 
            alert('Ambos campos deben ser iguales!');
            campo = null;
            return false; 
       }else{ return true; }
    }else{
        campo = val;
        return;
    }
}
</script>
 

[pedrolp]

ola bueno gracias por el dato y por el codigo, en cierta forma funciona, pero no es lo q busco, por ejemplo al colocar algun texto en el 1er campo y al cambiar al siguiente campo (valor 2) ya me manda el mensaje de que ambos campos deben ser iguales, aun sin haber escrito nada, no es lo q buscaba exactamente, sino q al colocar algun texto en el campo 1 y luego lo compare con el campo 2 para que al ser iguales cambiar inmediatamente al campo 3 y no muestre nada en caso contrario me diga que dichos campos son distintos, mostrando un mensaje de error

creo que me dejo entender.. bueno espero me puedan ayudar y gracias

[easy]

puede que te funcion esta funcion

Código:

function validar2campos(form)

{

    if(form.campo2.value == form.campo1.value)

    { form.submit(); }

    else

    {

    alert("El texto ingresado en los campos no coincide");

    form.campo2.value = ""; form.campo2.focus(); return false;

    }

}

Código HTML:

<form>

Campo1: <input type="text" name="campo1"><br>

Campo2: <input type="text" name="campo2"><br>

<input type="submit" value="comparar" onClick="validar2campos(this.form)">

</form> 

Saludos,

[pedrolp]

gracias x el codigo, en cierta forma si funciona esta vez, no exactamente como queria, pero vere si lo puedo adaptar a lo que quiero exactamente... aunq seria bueno si alguien me pudiera decir como hacer para q al cambiar de campo 2 al campo 3 x ejm me mande que campo 1 y 2 son distintos (con solo cambiar con clic o tab).

Gracias de todas maneras (Y)

[easy]

El codigo que te pase es totalmente adaptable para que le sumes los campos que quieras, siempre recuerda esto, si cambias al campo 3 es decir si le pones otro campo y cambias del campo 2 al 3 en lugar de hacerlo por submit hazlo por focus();

Código:

function validar() {
	if  (document.formulario.campo1.value.length==0){
		alert("texto a mostrar")
       document.formulario.campo1.focus()
       return false;
	}
        if  (document.formulario.campo2.value.length==0){
		alert("texto a mostrar")
       document.formulario.campo2.focus()
       return false;
	} else {
        if  (document.formulario.campo1.value!=document.formulario.campo2.value){
		alert("texto a mostrar")
       document.formulario.campo2.focus()
       return false;
                   }
        }
        if  (document.formulario.campo3.value.length==0){
		alert("texto a mostrar")
       document.formulario.campo3.focus()
       return false;
	}
	return true;
}

y al lado del boton submit pon:

Código:

 onclick="return validar()"

Algo asi, pruebalo y me cuentas

Saludos y recuerda mi karma :) ,

[pedrolp]

mmm bueno no te entendi mucho lo q kerias decir, de todas maneras copie el ultimo codigo q enviaste y no sucede nada, con el anterior agregue un campo mas pero pasa lo mismo q me paso al principio, al estar en el campo 1 y colocar texto, cuando cambio al campo 2 ya me manda que los campos son diferentes, sin poner nada en el campo 2, y eso que el focus q me dices lo coloque en el campo 2, exactamente no he entendi mucho esto de los atributos del input ya q siempre he tenido problema con estos, no se si me pueden hechar una mano, porque la verdad ya me perdi mas :/, gracias x la ayuda

[easy]

en que parte te perdiste??

[easy]

aqui te dejo el codigo completo

Código HTML:

<!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>Documento sin t&iacute;tulo</title>
<script language="javascript" type="text/javascript">
<!--
function validar() {
	if  (document.formulario.campo1.value.length==0){
		alert("texto a mostrar campo1")
       document.formulario.campo1.focus()
       return false;
	}
        if  (document.formulario.campo2.value.length==0){
		alert("texto a mostrar campo2")
       document.formulario.campo2.focus()
       return false;
	} else {
        if  (document.formulario.campo1.value != document.formulario.campo2.value){
		alert("texto a mostrar que no son iguales");
       document.formulario.campo2.focus()
       return false;
                   }
        }
        if  (document.formulario.campo3.value.length==0){
		alert("texto a mostrar campo3")
       document.formulario.campo3.focus()
       return false;
	}
	return true;
}
//-->
</script>
</head>

<body>
<form name="formulario" action="1.php" method="post" >
Campo 1:&nbsp;&nbsp;<input name="campo1" type="text" />
&nbsp;&nbsp;&nbsp;
Campo 1:&nbsp;&nbsp;<input name="campo2" type="text" />
&nbsp;&nbsp;&nbsp;
Campo 1:&nbsp;&nbsp;<input name="campo3" type="text" />
&nbsp;&nbsp;&nbsp;
<input type="submit" value="Comprobar" onclick="return validar()" />
</form>
</body>
</html> 

espro que lo hayas entendido
pero de todas maneras debes poner en que parte no entendiste para que otros en el foro sepan cual es tu error

Saludos y un gracias pueden valer

P.D.: No te olvides de mi karma :)

[caricatos]

Hola:

La estructura de validación de formularios con javascript es desde el evento submit, y no desde el click de un botón... El abc de los formularios

simplemente en el tag form:

<form onsubmit="return validar(this)"...

Lo del this es preferible y facilita la reutilización.

Saludos

[pedrolp]

ok gracias x la ayuda (Y) y perdonen x demorar en responder, pero lo podre leer mas tarde, asi podre darme tiempo y leerlo con trankilidad, gracias de todas maneras y luego les responde que tal me fue... Saludos!!

[easy]

Gracias caricatos (maestro de javascript), tienes razón se deberia hacer en la primera etiqueta <form y con evento onsubmit

Saludos

[jlomss]

Hola amigos quisiera saber por que en internet explorer funciona a la perfeccion la validacion de los campos y en firefox no, ni siquiera salen las alertas.

<form id="form2" name="form2" method="post" onsubmit="return checkFields();" action="formulario_trabajadores.php">
<script language="JavaScript">

<!-- Begin
function checkFields() {
missinginfo = "";
if (document.form2.nombre.value == "") {
missinginfo += "\n - nombre";
}

if ((document.form2.email.value == "") ||
(document.form2.email.value.indexOf('@') == -1) ||
(document.form2.email.value.indexOf('.') == -1)) {
missinginfo += "\n - Email";
}
if(form2.confirma_correo.value != form2.email.value)
{
alert("El email ingresado no coincide");
form2.confirma_correo.value = ""; form2.confirma_correo.focus(); return false;
}
if ((document.form2.pagina.value == "") ||
(document.form2.pagina.value.indexOf("http://") == -1) ||
(document.form2.pagina.value.indexOf(".") == -1)) {
missinginfo += "\n - pagina";
}
if(document.form2.cel.value == "") {
missinginfo += "\n - cel";
}
if(document.form2.tel.value == "") {
missinginfo += "\n - tel";
}
if(document.form2.nombre_empresa.value == "") {
missinginfo += "\n - Nombre Empresa";
}
if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"Te ha faltado introducir los siguientes datos:\n" +
missinginfo + "\n_____________________________" +
"\n¡Por favor pulsa enter, rellena los datos y prueba de nuevo!";
alert(missinginfo);
return false;
}
else return true;
}
// End -->
</script>

<input type="submit" value="Enviar" name="btTutorial" disabled/>
</p>
</fieldset>
</form>

[caricatos]

Hola:

En algunas partes tienes form2 sin anteponer que es parte del documento (document.form2)...

Y por cierto, no reabras viejos temas para nuevas consultas...

Saludos