> Manuales > Taller de Javascript

En un formulario donde se han escrito dos claves, explicamos como comprobar, utilizando Javascript, que son iguales antes de mandarlas al servidor.

En un formulario de registro de usuarios es muy habitual que deseemos incluir un campo clave, que podría utilizarlo el usuario para acceder a los servicios de la web donde se está registrando o para actualizar más adelante la información introducida.

Para realizar un formulario donde se escriba la clave, lo normal es que aparezcan dos campos donde introducir la misma clave y que el usuario que la introduzca esté forzado a escribir la clave dos veces, siendo las dos claves introducidas iguales. Esto nos ayuda a que el usuario no se equivoque al escribir la clave por un fallo en la mecanografía, ya que es complicado que se equivoque dos veces en al escribir la clave.

Con Javascript podemos hacer una comprobación -en el cliente- para ver si se ha introducido la misma clave en los dos campos y, si es así, mandar el formulario al servidor o hacer aquellas acciones necesarias para continuar con el registro de ese visitante. En caso de que las dos claves sean distintas se debería informar al usuario de la situación para que vuelva a introducir la clave deseada correctamente.

Comprobar si dos campos de formulario son iguales

Es una acción bastante sencilla. Simplemente debemos extraer los dos valores guardados en los campos del formulario donde se ha escrito la clave y la repetición de la clave.

Luego, con un enunciado if, podemos comprobar si estos dos datos son el mismo o no lo son y hacer las sentencias necesarias en cada caso.

La función podría tener una forma como esta:

function comprobarClave(){
    clave1 = document.f1.clave1.value
    clave2 = document.f1.clave2.value

    if (clave1 == clave2)
       alert("Las dos claves son iguales...\nRealizaríamos las acciones del caso positivo")
    else
       alert("Las dos claves son distintas...\nRealizaríamos las acciones del caso negativo")
}


Nota: si deseamos mandar el formulario al servidor después de haber visto que las dos claves son iguales, es decir, si después de la comprobación queremos submitir el formulario, podríamos ejecutar el método submit() del objeto form.

document.f1.submit()


Nótese que el formulario donde estamos accediendo por la jerarquía de objetos del navegador se llama "f1". Eso quiere decir que la etiqueta <FORM> del formulario donde están los dos campos tiene el atributo name="f1". Si nuestro formulario se llama de otra manera habría que cambiar las líneas donde se accede a los dos campos de la clave, sustituyendo "f1" por el nombre de nuestro formulario. Del mismo modo, los dos campos donde se escriben las claves en nuestro ejemplo se supone que se llaman "clave1" y "clave2", si no es así, también habría que cambiar ese nombre por el que toque.

Para verlo más claro, aquí tenemos el código del formulario donde se encuentran los campos y sus nombres.

<form action="" name="f1">
Contraseña: <input type="password" name="clave1" size="20">
<br>
Repite contraseña: <input type="password" name="clave2" size="20">
<br>
<input type="button" value="Comprobar si son iguales" onClick="comprobarClave()">
</form>


Conclusión

Dada su sencillez, no debería suponer mucho problema este ejemplo. Nos quedaría ver el código del ejemplo completo y, si lo deseamos, acceder a una página donde se muestra el ejercicio en marcha.

<html>
<head>
<title>Validar si la contraseña y la repetición de la contraseña son iguales</title>
<script>
function comprobarClave(){
    clave1 = document.f1.clave1.value
    clave2 = document.f1.clave2.value

    if (clave1 == clave2)
       alert("Las dos claves son iguales...\nRealizaríamos las acciones del caso positivo")
    else
       alert("Las dos claves son distintas...\nRealizaríamos las acciones del caso negativo")
}
</script>
</head>

<body>

<h1>Validar si la contraseña y la repetición de la contraseña son iguales</h1>
<br>
Escribe una supuesta contraseña dos veces, una en cada campo, y pulsa el botón. Javascript te dirá si las dos son iguales.

<br>
<form action="" name="f1">
Contraseña: <input type="password" name="clave1" size="20">
<br>
Repite contraseña: <input type="password" name="clave2" size="20">
<br>
<input type="button" value="Comprobar si son iguales" onClick="comprobarClave()">

</form>

</body>
</html>

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual