Quiero crear un formulario que admita una dirección de correo electrónico y una contraseña. El correo electrónico y la contraseña se inicializaron anteriormente, por lo que aparecerá un mensaje de error en el correo electrónico o la contraseña ingresada no coincide. Si ambos son correctos, debería aparecer el mensaje "inicio de sesión exitoso". ¿Cómo hago para que me aparezca este mensaje?
Aquí está mi código:
var email = document.forms["form"]["email"].value; var alamat = document.forms["form"]["password"].value; if (email == "admin@example.com" && password == "12345") { alert("Login Successful!"); } else { alert("The email or password you entered is wrong!"); return false; } body { background: #3498db; font-family: sans-serif; } h2 { color: #fff; } .login { padding: 1em; margin: 2em auto; width: 17em; background: #fff; border-radius: 3px; } label { font-size: 10pt; color: #555; } input[type="password"], input[type="text"], textarea { padding: 8px; width: 95%; background: #efefef; border: 0; font-size: 10pt; margin: 6px 0px; } .tombol { background: #3498db; color: #fff; border: 0; padding: 5px 8px; } <html> <head> <title>Form Validasi</title> <link rel="stylesheet" type="text/css" href="tampilan.css"> <script src="apps.js"></script> </head> <body> <div class="login"> <form action="#" method="get" id="form"> <div> <label>Email</label> <input type="text" name="email" /> </div> <div> <label>Password</label> <input type="password" name="password" /> </div> <div> <input type="submit" value="Login" class="tombol"> </div> </form> </div> </body> </html>De esta manera, su código javascript se ejecuta instantáneamente, no al hacer clic.
Si desea ejecutar un fragmento de código después de hacer clic en crear una función, por ejemplo, iniciar sesión().
Y luego agregue su elemento de botón onClick="login()" y no use input type="submit" , use type="button" como tipo, porque en este caso no está enviando ningún formulario sino solo procesándolo con js.
Tenga en cuenta también que está declarando var alamat pero verifica la password == xxx en la condición (que usted no creó) También arreglé esto en el fragmento cambiando alamat con password .
Aquí el fragmento de trabajo:
function login(){ var email = document.forms["form"]["email"].value; var password = document.forms["form"]["password"].value; if (email == "admin@example.com" && password == "12345") { alert("Login Successful!"); } else{ alert("The email or password you entered is wrong!"); return false; } } body { background: #3498db; font-family: sans-serif; } h2 { color: #fff; } .login { padding: 1em; margin: 2em auto; width: 17em; background: #fff; border-radius: 3px; } label { font-size: 10pt; color: #555; } input[type="password"], input[type="text"], textarea { padding: 8px; width: 95%; background: #efefef; border: 0; font-size: 10pt; margin: 6px 0px; } .tombol { background: #3498db; color: #fff; border: 0; padding: 5px 8px; } <html> <head> <title>Form Validasi</title> <link rel="stylesheet" type="text/css" href="tampilan.css"> <script src="apps.js"></script> </head> <body> <div class="login"> <form action="#" method="get" id="form"> <div> <label>Email</label> <input type="text" name="email"/> </div> <div> <label>Password</label> <input type="password" name="password"/> </div> <div> <input onClick="login()" type="button" value="Login" class="tombol"> </div> </form> </div> </body> </html>Escuche el evento de submit :
form.addEventListener('submit', function(e) { var email = document.forms["form"]["email"].value; var alamat = document.forms["form"]["password"].value; if (email == "admin@example.com" && password == "12345") { alert("Login Successful!"); } else { alert("The email or password you entered is wrong!"); e.preventDefault(); } }) body { background: #3498db; font-family: sans-serif; } h2 { color: #fff; } .login { padding: 1em; margin: 2em auto; width: 17em; background: #fff; border-radius: 3px; } label { font-size: 10pt; color: #555; } input[type="password"], input[type="text"], textarea { padding: 8px; width: 95%; background: #efefef; border: 0; font-size: 10pt; margin: 6px 0px; } .tombol { background: #3498db; color: #fff; border: 0; padding: 5px 8px; } <html> <head> <title>Form Validasi</title> <link rel="stylesheet" type="text/css" href="tampilan.css"> <script src="apps.js"></script> </head> <body> <div class="login"> <form action="#" method="get" id="form"> <div> <label>Email</label> <input type="text" name="email" /> </div> <div> <label>Password</label> <input type="password" name="password" /> </div> <div> <input type="submit" value="Login" class="tombol"> </div> </form> </div> </body> </html>