Home / Questions / 120458
Accepted
omaza1990
Asked: 2020-11-28 01:45:35 +0800 CST 2020-11-28 01:45:35 +0800 CST

Validate HTML Javascript Form

  • 772

Why does it let me send data if the fields are empty? I should get the alert and not let me continue.

function validar_iniciar_sesion_cliente(){
  var idemail, password1;
  idemail = document.getElementById("email").value;
  password1 = document.getElementById("password").value;

  if(idemail=="" || password1==""){
    alert("Todos los campos son obligatorios.");
    return false;
  }else if(idemail.length>50){
    alert("El email debe tener menos de 51 carácteres.");
    document.getElementById("email").value = "";
    document.getElementById("email").focus();
    return false;
  }else if(password1.length>16){
    alert("La contraseña debe tener menos de 17 carácteres.");
    document.getElementById("password").focus();
    return false;
  }
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Formulario de Login - Cliente</title>
    <link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
    <script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
  </head>
  <body>
    <form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
      <h2>INICIAR SESIÓN</h2>
      <input type="text" placeholder="&#128272; Usuario" name="email">
      <input type="password" placeholder="&#128272; Contraseña" name="password">
      <div align="center">
        <input type="submit" value="Iniciar sesión"><br/>
        <p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p>
      </div>
    </form>
  </body>
</html>

In the console the error appears:

Uncaught TypeError: Cannot read property 'value' of null

javascript

1 Answers

  1. Best Answer

    The property needs to be defined idin the inputs emailand password, since it is the one you use javascriptto collect the values ​​and check if they are empty. As they are not defined, it cannot collect the value.

    HTML code:

    <!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Formulario de Login - Cliente</title>
        <link rel="stylesheet" href="css/estilos_iniciar_sesion.css">
        <script type="text/javascript" src="js/validar_iniciar_sesion_cliente.js"></script>
    </head>
    <body>
        <form name="miformulario" id="miformulario" action="logueo_cliente.php" method="POST" class="form" onsubmit="return validar_iniciar_sesion_cliente();">
            <h2>INICIAR SESIÓN</h2>
            <input type="text" placeholder="&#128272; Usuario" name="email" id="email">
            <input type="password" placeholder="&#128272; Contraseña" name="password" id="password">
            <div align="center">
                <input type="submit" value="Iniciar sesión"><br/>
                <p class="form-link">¿Aún no tienes una cuenta? <a href="registrar.php">Regístrate aquí</a></p>
            </div>
        </form>
    </body>
</html>
    • 3