Formulario que con 'Enter' llega vacío

[sty]

Hola! tengo el siguiente formulario...

Los 2 campos que tiene, tienen valores que al clicar sobre ellos se borran y al clicar fuera se autoescribe el valor por defecto que tenia.
El botón de envío es una imagen.

Y me surge el problema de que al enviar el formulario pulsando 'Enter' o 'Intro' los datos llegan vacíos, mientras que pulsando sobre el botón, que este caso es una imagen, llegan correctamente.

No paro de darle vueltas... alguna ayuda?

Código HTML:

<script language="JavaScript" type="text/JavaScript">
function limpiar(campo){ var field = document.getElementById(campo); field.value = ""; }
function cambiar(campo, valor){ var field = document.getElementById(campo); if(field.value == ""){ field.value = valor; } }
function validar(){ with (document.login){ if (nick.value == 'usuario'){ alert('Introduzca su nick'); nick.focus(); return false; } else submit(); } }
</script> 

Código HTML:

<form action="us_conectar_procesar.php" method="post" name="login">
<input type="text" name="nick" id="nick" onfocus="limpiar('nick')" onblur="cambiar('nick','usuario')" value="usuario" size="10" maxlength="15" />
<input type="password" name="password" id="password" onfocus="limpiar('password')" onblur="cambiar('password','password')" value="password" size="10" maxlength="20" />
<input name="submit" type="image" src="imagen/submit.gif" alt="Conectar" onclick="validar()" />
</form> 

[crujikoki]

Hola,

A lo mejor digo una tonteria, pero puede ser que sea por que tienes puesto el evento "onclick" pruba de quitarlo y haz un submit normal y corriente en el formulario a ver que tal.

Saludos.

[aloqui]

Puedes intentar lo siguiente, ponerle un atributo id al form, y luego cuando hayas validado, llamar al submit de ese id.

<form action="us_conectar_procesar.php" method="post" name="login" id="form1" name="form1">

function validar(){ with (document.login){ if (nick.value == 'usuario'){ alert('Introduzca su nick'); nick.focus(); return false; } else { document.getElementById("form1").submit(); } } }

[sty]

Continua el problema...

Si se le quita el onfocus se envía bien, pero es necesario que esté.

[messer]

Hola sty!

La solucion a tu problema esta en esto:

Código:

<form name... onsubmit="return validar()">

claro debes corregir ciertos detalles en tu codigo para que funcione del todo bien, por ejemplo:

- Debes validar que ninguno de los 2 campos pueda quedar en blanco.
- Generar una sola alerta para los dos campos o alertas para cada uno, nunca para uno solo de estos.
- Verificar los campos que no tengan asignados ni el valor por defecto, ni queden en blanco.

Espero te sirva de ayuda.

Saludos!

[aloqui]

Otra cosa que debes tener en cuenta es que aunque hagas validaciones en el lado del cliente (en javascript en éste caso), las validaciones DEBEN HACERSE TAMBIEN en el servidor.
Pues sino dejas la puerta abierta a que te metan cualquier cosa.

[sty]

Sigue dando problemas, lo he probado todo... pulsando el boton (que es una imagen) va bien, pero enviándolo con Enter si se escribe alguna contraseña no para de saltar el 'Introduzca su contraseña".

Código HTML:

<script language="JavaScript" type="text/JavaScript">
function limpiar(campo){ var field = document.getElementById(campo); field.value=""; }
function cambiar(campo, valor){ var field = document.getElementById(campo); if(field.value==""){ field.value=valor; } }
function validar(){
with(document.login){
if(nick.value == 'usuario' || nick.value==''){
alert('Introduzca su nick');
nick.focus();
return false;
} else if(password.value==''){
alert('Introduzca su contraseña');
password.focus();
return false;
} else {
submit();
} } }
</script>
<form action="us_conectar_procesar.php" method="post" name="login" onsubmit="return validar()">
<input type="text" name="nick" id="nick" onclick="limpiar('nick')" onblur="cambiar('nick','usuario')" value="usuario" size="10" maxlength="15" />
<input type="password" name="password" id="password" onfocus="limpiar('password')" onblur="cambiar('password','password')" value="password" size="10" maxlength="20" /><button type="submit" style="margin:0; padding:0; border:0; background-color:transparent"><img src="imagen/submit.gif" alt="submit" /></button>
</form> 

Uff... llevo todo el día dándole vueltas a esto. Aloqui, también se valida del lado del servidor ;)

[JavierB]

Hola sty

Prueba cambiando <button type="submit"... por <input type="image" src="imagen/submit.gif" />

Saludos,

[sty]

Lo probé JavierB, y mismo problema...

[crujikoki]

Hola, a mi poniendo esto me funciona:

Código PHP:

  <html>
<head>
<script language="JavaScript" type="text/JavaScript">
function limpiar(campo)
{ 
    var field = document.getElementById(campo);
    field.value=""; 
}
 
function cambiar(campo, valor)
{
    var field = document.getElementById(campo);
    if(field.value=="")
    {
        field.value=valor;
    }
}
 
function validar()
{
    with(document.login)
    {
        if(nick.value == 'usuario' || nick.value=='')
        {
            alert('Introduzca su nick');
            nick.focus();
            return false;
        }
        else if(password.value=='' || password.value=='')
        {
            alert('Introduzca su contraseña');
            password.focus();
            return false;
        }
        else
        {
            document.login.submit();
        }
    }
}
</script>
</head>
<body>
<form action="lo_que_sea.html" method="post" name="login" id="login" onsubmit="return validar()">
<input type="text" name="nick" id="nick" onclick="limpiar('nick')" onblur="cambiar('nick','usuario')" value="usuario" size="10" maxlength="15" />
<input type="password" name="password" id="password" onfclick="limpiar('password')" onblur="cambiar('password','password')" value="password" size="10" maxlength="20" />
<input type="submit" style="margin:0; padding:0; border:0; background-color:transparent"></input>
</form>
</body>
</html> 
  

Los cambios que he hecho han sido:

-Quitar la imagen dejando solo el boton.

-He cambiado esto: else if(password.value=='')
por esto: else if(password.value=='' || password.value=='password')

-Y he cambiado esto: submit();
por esto: document.login.submit();

Haciendo esos cambios me ha funcionado tanto con el ratón como con el enter...
Mira a ver si a ti te funciona.

Saludos.

[crujikoki]

Es más, acabo de volver a probar este código tuyo sin modificarlo:

Código PHP:

  <script language="JavaScript" type="text/JavaScript">
function limpiar(campo){ var field = document.getElementById(campo); field.value=""; }
function cambiar(campo, valor){ var field = document.getElementById(campo); if(field.value==""){ field.value=valor; } }
function validar(){
with(document.login){
if(nick.value == 'usuario' || nick.value==''){
alert('Introduzca su nick');
nick.focus();
return false;
} else if(password.value==''){
alert('Introduzca su contraseña');
password.focus();
return false;
} else {
submit();
} } }
</script>
<form action="us_conectar_procesar.php" method="post" name="login" onsubmit="return validar()">
<input type="text" name="nick" id="nick" onclick="limpiar('nick')" onblur="cambiar('nick','usuario')" value="usuario" size="10" maxlength="15" />
<input type="password" name="password" id="password" onfocus="limpiar('password')" onblur="cambiar('password','password')" value="password" size="10" maxlength="20" /><button type="submit" style="margin:0; padding:0; border:0; background-color:transparent"><img src="imagen/submit.gif" alt="submit" /></button>
</form> 
  

y a mi me funciona perfectamente, tanto con el ratón como con el enter... Eso si, cambiando el action del form, evidentemente.

[sty]

crujikoki, tu código funciona perfectamente, incluso con <input type="image"... en vez de <buttom.... Que raro... :, que extraño... que curioso... El caso es que funciona

Muchas gracias crujikoki y a todos espero poder ayudarlos en otra ocasión

[caricatos]

Hola:

Hay algunas reglas para los formularios y es siempre enviarlos con botones submit... el método submit reservarlo para cosas menos importantes como vistas previas. Así que en los códigos que he visto, aconsejo cambiar las líneas que ponen submit() por return true (incluso supongo que podrían obviarse esos "elses"...
Otra regla es validar en el evento submit, y también aconsejo pasar el propio formulario como parámetro... en resumen:
<form onsubmir="return validar(this)" ...

y en la función validar:

function validar(f) {
with (f) {
Ok = elemento1.value != "" || elemento2.value != "";
}
if (!Ok) alert("fallo...")
return Ok;
}

La idea es que la función validar devuelva true/false... y false anula el envío.

Sobre el problema está que el onblur del campo password siempre se vuelve a "usuario"... creo que ese cambio deberías condicionarlo...

<input type="password" name="password" id="password" onfocus="limpiar('password')" onblur="if (this.value == '') cambiar('password','password')" value="password" size="10" maxlength="20" />

Hay otras cosillas que mirar, pero espero que esto resuelva la pregunta.

Saludos

[sty]

Caricatos, paisano

Quedando el código así... (He cambiado || por &&)

Código HTML:

function validar(f){ 
with(f){ 
Ok = nick.value != "usuario" && nick.value != "" && password.value != "";
}
if (!Ok) alert("Fallo");
return Ok;
}

...el fallo siempre es fallo, sin decir si es el nick o la password, ni poniendo el foco en el campo que produce el fallo.

Lo de condicionar el onblur de <input type="password" name="password" id="password" onfocus="limpiar('password')" onblur="if (this.value == '') cambiar('password','password')" value="password" size="10" maxlength="20" /> no lo entiendo, puesto que esa comprobación ya se hace en la propia funcion cambiar.

Gracias por tu ayuda