Validate Javascript HTML form

Question

Validate Javascript HTML form

Navigation

#1 by (3 votes)

2

Why would you 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>

The error appears in the console:

Uncaught TypeError: Can not read property 'value' of null

javascript html

asked by omaza1990 27.11.2017 в 10:45

source

1 answer

Run two programs at the same time Save fixes in database

score 3 · Accepted Answer

It is still necessary to define the property id in the inputs email and password , since it is the one you use in javascript to collect the values and check if they are empty. As they are not defined, they can not 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>