Question 45351 in Html Question posted in
Some basic documentation can be found here.

Field validation with JS and HTML

My problem with the following code is that it does not let me enter with the users and passwords of the first three positions of the arrays, but it does let me enter with the last one and I want it to let me enter with each user and their respective password, for example user position 1 with password position 1.

I did it with an if nested in a for and reading the code should work, but it doesn’t.

function validar() {
  var nombre = document.Formulario.nombre.value;
  var password = document.Formulario.password.value;
  var indice = document.Formulario.rol.value;
  var users = Array('Ruben', 'Juan', 'Pedro', 'Luis');
  var pass = Array('1234', 'admin', 'abcd', 'password');
  if (nombre == '' || password == '' || indice == 0) {
    alert("Faltan campos por llenar");
  } else {
    alert("Campos llenos :)");
  }

  for (let i = users.length - 1; i >= 0; i--) {
    if (nombre == users[i] && password == pass[i]) {
      alert('Bienvenido ' + nombre);
      break;
    } else {
      alert('Datos incorrectos');
      break;
    }
  }
}
<form name="Formulario" method="get" action="recibe.php">
  <input type="text" name="nombre" id="nombre" placeholder="Usuario" /><br>
  <input type="text" name="password" id="password" placeholder="Password" /><br>
  <select name="rol" id="rol">
    <option value="0">Selecciona</option>
    <option value="1">Gerente</option>
    <option value="2">Ejecutivo</option>
  </select><br>
  <input onclick="validar(); return false;" type="submit" value="Enviar" />
</form>
Tags:

2

Answers


  1. 0

    You can use indexOf for your conditional check instead of using a for loop

            function validar(){
            var nombre = document.Formulario.nombre.value;
            var password = document.Formulario.password.value;
            var indice = document.Formulario.rol.value;
            var users = Array('Ruben', 'Juan', 'Pedro', 'Luis');
            var pass  = Array('1234', 'admin', 'abcd', 'password');
            if(nombre=='' || password=='' || indice==0){    
               alert("Faltan campos por llenar");
             } else {
                alert("Campos llenos :)");
             }

             if(users.indexOf(nombre) === pass.indexOf(password)) {
               alert('Bienvenido ' + nombre);
             }
             else {
               alert('Datos incorrectos');
             }
            
        }
    <html>
    <head>
        <title>A8. Validacion de campos con JS + Arreglos_CarlosLomeli</title>
    
    </head>
    <body>
        <form name="Formulario" method="get" action="recibe.php">
        <input type="text" name="nombre" id="nombre" placeholder="Usuario"/><br>
        <input type="text" name="password" id="password" placeholder="Password"/><br>
        <select name="rol" id="rol">
            <option value="0">Selecciona</option>
            <option value="1">Gerente</option>
            <option value="2">Ejecutivo</option>
        </select><br>
        <input onclick="validar(); return false;" type="submit" value="Enviar"/>
        </form>
    </body>
</html>
    Login or Signup to reply.
  2. 0
    1. Use the form submit event
    2. You can use some, to test the user and password
    3. You need to stop the submission when the validation fails
    window.addEventListener("DOMContentLoaded", () => { // when page loads
  const users = ['Ruben', 'Juan', 'Pedro', 'Luis'];
  const pass = ['1234', 'admin', 'abcd', 'password'];

  const form = document.Formulario;
  form.addEventListener("submit", (e) => {
    var nombre = form.nombre.value.trim();
    var password = form.password.value.trim();
    var indice = form.rol.value.trim();
    if (nombre == '' || password == '' || indice == 0) {
      alert("Faltan campos por llenar");
      e.preventDefault(); // stop submit
      return;
    }
    if (users.some((user, i) => user === nombre && password == pass[i])) {
      alert('Bienvenido ' + nombre);
    } else {
      alert('Datos incorrectos');
      e.preventDefault(); // stop submit
      return;
    }
  })
})
    <form name="Formulario" method="get" action="recibe.php">
  <input type="text" name="nombre" id="nombre" placeholder="Usuario" /><br>
  <input type="text" name="password" id="password" placeholder="Password" /><br>
  <select name="rol" id="rol">
    <option value="0">Selecciona</option>
    <option value="1">Gerente</option>
    <option value="2">Ejecutivo</option>
  </select><br>
  <input type="submit" value="Enviar" />
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search