Este es un taller de Javascript de nivel de iniciación, que muestra cómo acceder a elementos de formulario y cómo verificar sus valores.

Motivación de esta práctica Javascript

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.

El formulario con los campos clave

Para comenzar de una manera sencilla, mostramos el código del formulario donde se encuentran los campos y sus nombres.

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

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() {
    let clave1 = document.f1.clave1.value
    let 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")
    }
}

En el ejemplo anterior hemos accedido a los elementos de formulario a través del nombre del formulario, usando la jerarquía de elementos de la página y el DOM.

En ocasiones también es habitual acceder a los campos del formulario por medio de su identificador o su nombre, para lo que existen diversas funciones que podríamos utilizar. Por ejemplo, la siguiente sería una función similar, que permite acceder a los elementos por su identificador (atributo id).

function comprobarClave() {
    let clave1 = document.getElementById("clave1").value
    let clave2 = document.getElementById("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")
    }
}

Enviar el formulario después de haber comprobado las claves

Podemos usar el método submit() de los formularios Javascript si es que deseamos mandar el formulario al servidor después de haber visto que las dos claves son iguales. Con el siguiente código, si después de la comprobación queremos submitir el formulario, simplemente tendríamos que acceder al formulario para 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 ese nombre.

Pero igual que antes, también podríamos acceder al formulario por su atributo id, con el código siguiente:

document.getElementById("f1").submit()

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.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>