Home / Questions / 417701
Accepted
Luis Ricardo Rodrguez Hernndez
Asked: 2021-12-31 11:46:17 +0800 CST 2021-12-31 11:46:17 +0800 CST

How to validate my form so that it tells the user if the passwords are the same? [closed]

  • 772

I have been searching in documentation how to validate two passwords, but I don't understand much about how to do it, I am just getting into these languages ​​and I would like if someone could explain or teach me how to do it please. this is my html code but i don't know if i need javascript too and how do i call the html file in java. I have also seen that they put the java code in the HTML document but I don't understand which is the html part and which is the java part.

Here my code adding what they provided me

<html>
<head>

    <meta charset = "utf-8">
    <title>Registro</title>
    <link rel="stylesheet" href="../css/registro.css">

</head>
<body>

    <div class="HS">
        <img src="../img/House_Student.png" class="letter" alt"la">
        </div>

        <div class="titulo">
            <h1>Registrate</h1>
            </div>

<div class="caja_login">
    </div>

    <div class="formulario" align="left">
    <form action="registro.php" name="formulario" id="formulario" method="post">

        <label for="Introduce tu nombre">Nombre: </label>
        <input type="text" name="nombre" placeholder="ej. Luis Ricardo"
        required="" pattern="[a-z-A-Z-á-ú]+"
        title="Unicamente escriba su nombre. No se aceptan numeros en este espacio. Si tiene mas de un nombre escriba unicamente uno.">
<p> </p>
        <label for="Introduce tu apellido paterno">Apellido paterno: </label>
        <input type="text" name="a_paterno" placeholder="ej. Hernández"
        required="" pattern="[a-z-A-Z-á-ú]+"
        title="Unicamente escriba su apellido paterno. No se aceptan numeros en este espacio">

        <label for="Introduce tu apellido materno">Apellido materno: </label>
      <input type="text" name="a_materno" placeholder="ej. Rodríguez"
        required="" pattern="[a-z-A-Z-á-ú]+"
        title="Unicamente escriba su apellido paterno. No se aceptan numeros en este espacio">
<p> </p>

        <label for="Introduce tu edad">Edad: </label>
        <input type="number" name="edad" placeholder="ej. 50"
        required="" min="1" max="120"
        title="Escriba su edad en este espacio. Minimo 1 y maximo 120">

        <label for="Introduce tu Pais">pais: </label>
        <input type="text" name="pais" placeholder="ej. México"
        required="" pattern="[a-z-A-Z-á-ú]+"
        title="Escriba el pais de su procedencia. No se aceptan numeros en este espacio">
<p> </p>
        <label for="Introduce tu Correo">Correo(opcional): </label>
        <input type="email" name="correo" placeholder="[email protected]"
        title="Su correo no tiene '@' es necesario que escriba correctamente su correo.
        ejemplo: [email protected]">
<p> </p>
        <label for="Introduce una contraseña">Contraseña: </label>
        <input type="password" requiered="" name="contr" id="contr1"><br>

        <label for="Introduce una contraseña">Confirma tu contraseña: </label>
        <input type="password" requiered="" name="contr2" id="contr2"><br>

        <input type="submit" value="Registro"><br>

</div>
<script>
formMain.addEventListener("submit", (e) => { // Escuchar cuando se envíe el formulario
  if (contr1.value !== contr2.value) { // Comprobar si los valores de los inputs son iguales, si no lo son continuar
    e.preventDefault(); // Prevenir que la página se recargue
    err.innerHTML = "Las contraseñas no coinciden"; // Notificar al usuario
    setTimeout(() => {
      err.innerHTML = " ";
    }, 1200); // Esperar 1.2 segundos y quitar el mensaje
  }
});
</script>

</body>
</html>
validación

1 Answers

  1. Best Answer

    You can do this with a simple javascript script:

    formMain.addEventListener("submit", (e) => { // Escuchar cuando se envíe el formulario
  if (pass1.value !== pass2.value) { // Comprobar si los valores de los inputs son iguales, si no lo son continuar
    e.preventDefault(); // Prevenir que la página se recargue
    err.innerHTML = "Las contraseñas no coinciden"; // Notificar al usuario
    setTimeout(() => {
      err.innerHTML = " ";
    }, 1200); // Esperar 1.2 segundos y quitar el mensaje
  }
});
    .cont {
  padding:20px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Form validation</title>
  </head>
  <body>
    <div class="cont">
      <h1>Validación de forma</h1>
      <p>Inserte contraseñas a continuación
      <form method="POST" action="" id="formMain">
        <p><input required class="form-control" id="pass1" type="password" /></p>
        <p><input required class="form-control" id="pass2" type="password" /></p>
        <p><button class="btn btn-primary">Enviar</button></p>
        <p id="err" class="text-danger"> </p>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>

    Edit

    The first block of code you have (JS) has to go at the end of <body>your site tag and between tags <script>, otherwise javascript won't be able to fully read the DOM causing errors.

    Also there is no way you can do this without JavaScript, from the description of your question I can tell you that Java is a totally different programming language than JavaScript.

    Note that

    • HTML is the structure
    • css the styling
    • JavaScript is the part that adds logic to the page.
    • 0