Botón Enter para validar formulario

Chad46 · #1 (**permalink**) 31/07/2012, 06:50

Hola a todos!

Tengo el siguiente código:

<html>
<head>
<title>clave acceso</title>
</head>

<body>
<SCRIPT>
function acceso(){
window.location = document.formclave.clave.value + ".html"
}
</SCRIPT>

<FORM name=formclave>
<INPUT type=password name=clave>
<INPUT type=button value=Acceder onclick="acceso()">
</FORM>

</body>
</html>

Mi problema es que no sé cómo hacer para que al presionar enter después de escribir en el formulario, suceda lo mismo que al hacer click en el botón "Acceder". Se que hay temas relacionados en el foro pero no soy capaz de adaptar los códigos al que tengo. ¿Alguien podría modificar mi código para conseguir lo que quiero?

Muchas gracias de antemano!

maycolalvarez · #2 (**permalink**) 31/07/2012, 07:07

coloca la llamada a acceso() en el evento onsubmit del form:

<form onsubmit="return acceso();" ... >

dontexplain · #3 (**permalink**) 31/07/2012, 07:10

Cuando se envía un formulario por la acción por defecto (pulsar enter) se ejecuta el evento onsubmit, basta con paralizarlo a nivel del formulario

<FORM name=formclave onsubmit='return false;'>

Por otro lado, cuando se pulsa una tecla en un input se producen varios eventos, entre ellos, keypress, basta con detectar el código de la tecla presionada

<INPUT type=password name=clave onkeypress='if(event.which==13){acceso();}'>

si es 13, se ejecuta la función

Un saludo.

P.D: Lo de maycolalvarez funciona si agregas antes de return acceso() event.preventDefault(); ya que la acción por defecto se ejecuta predeterminadamente onsubmit

Chad46 · #4 (**permalink**) 31/07/2012, 07:21

Muchísimas gracias maycolalvarez y dontexplain!!

Juntando los aportes de los dos por fin ha salido. He usado el código de maycolalvarez y he añadido la corrección de dontexplain y funciona perfectamente.

No tengo ni idea en realidad de lo que he hecho ya que lo que estoy haciendo es intentar ser autodidacta para construir mi web pero en esto estaba realmente trabado así que os agradezco enormemente la ayuda.

maycolalvarez · #5 (**permalink**) 31/07/2012, 07:21

@dontexplain event.preventDefault() se utiliza para prevenir la acción por defecto en el evento, en el caso de un link <a> evitar la petición del href, en el caso del <form> no se enviaría la petición o envio del formulario en action, lo mismo que ocurre si retorno false al manejador del evento, donde le permito a la función validadora retornar true en caso de éxito.

además event.which no funciona en algunos navegadores, por lo cual debe de refactorizar el código para hacerlo crossbrowser

Usar el evento onsubmit del form es el ideal para validar el form, porque si se depende de un evento especifico de un input, sólo validará en función de ése input, y no del resto de elementos del form.

Por cierto, no olviden la validación del lado del servidor, recuerden que la validación del lado del cliente es opcional.

Chad46 · #6 (**permalink**) 31/07/2012, 07:26

Cita:

Iniciado por maycolalvarez

@dontexplain event.preventDefault() se utiliza para prevenir la acción por defecto en el evento, en el caso de un link <a> evitar la petición del href, en el caso del <form> no se enviaría la petición o envio del formulario en action, lo mismo que ocurre si retorno false al manejador del evento, donde le permito a la función validadora retornar true en caso de éxito.

además event.which no funciona en algunos navegadores, por lo cual debe de refactorizar el código para hacerlo crossbrowser

Usar el evento onsubmit del form es el ideal para validar el form, porque si se depende de un evento especifico de un input, sólo validará en función de ése input, y no del resto de elementos del form.

Por cierto, no olviden la validación del lado del servidor, recuerden que la validación del lado del cliente es opcional.

Hola de nuevo maycolalvarez!

Sinceramente no he entendido nada de lo que has dicho. El código me ha quedado así y parece que funciona, ¿vez algún error?

<p>clave acceso</p>
<p><script type="text/javascript">// <![CDATA[

function acceso(){
window.location = document.formclave.clave.value + ".html"
}
// ]]></script> <form onsubmit="event.preventDefault();return acceso();" name="formclave"> <input name="clave" type="password" /> <input onclick="acceso()" type="button" value="Acceder" /> </form></p>

Gracias de nuevo.

dontexplain · #7 (**permalink**) 31/07/2012, 07:43

Cita:

Iniciado por maycolalvarez

@dontexplain event.preventDefault() se utiliza para prevenir la acción por defecto en el evento, en el caso de un link <a> evitar la petición del href, en el caso del <form> no se enviaría la petición o envio del formulario en action, lo mismo que ocurre si retorno false al manejador del evento, donde le permito a la función validadora retornar true en caso de éxito.

además event.which no funciona en algunos navegadores, por lo cual debe de refactorizar el código para hacerlo crossbrowser

Usar el evento onsubmit del form es el ideal para validar el form, porque si se depende de un evento especifico de un input, sólo validará en función de ése input, y no del resto de elementos del form.

Por cierto, no olviden la validación del lado del servidor, recuerden que la validación del lado del cliente es opcional.

La acción por defecto del evento submit del formulario es enviar el formulario por lo que si no se previene tal acción por defecto simplemente envía primero el formulario sin ejecutar la segunda instrucción.

Por otro lado, creo que el equivalente de which en otros navegadores es keyCode por lo que bastaría un operador ternario para acceder al código de carácter

var keyCode = (window.event) ? e.which : e.keyCode;

suponiendo que e sea el event

Un saludo.