表单验证：邮箱与密码登录验证提示功能实现问题

Let's walk through the issues in your current code and get your validation working properly:

Key Problems in Your Current Code #

1. Variable Name Typo: You assigned the password value to a variable called alamat, but then checked against password—this makes the password check always fail since password is undefined.
2. Script Runs Before DOM is Ready: Your script loads in the <head>, so it executes before the form elements exist in the DOM. Trying to access document.forms["form"] at this point returns null, breaking your validation code entirely.
3. Default Form Submission: Even if validation worked, the form would reload the page immediately, making your alert disappear before you can see it.

Corrected Code #

1. Updated JavaScript (apps.js) #

// Wait for the entire DOM to load before running our code
document.addEventListener('DOMContentLoaded', function() {
  // Get reference to the login form
  const loginForm = document.getElementById('form');
  
  // Add a submit event listener to the form
  loginForm.addEventListener('submit', function(event) {
    // Prevent the form from submitting and reloading the page
    event.preventDefault();
    
    // Get values from input fields
    const email = document.forms["form"]["email"].value;
    const password = document.forms["form"]["password"].value; // Fixed variable name
    
    // Validate credentials
    if (email === "admin@example.com" && password === "12345") {
      alert("Login Successful!");
    } else {
      alert("The email or password you entered is wrong!");
    }
  });
});

2. HTML (Optional Adjustment) #

You can keep your existing HTML, but if you prefer, moving the script tag to the end of the body eliminates the need for DOMContentLoaded. Here's that version:

<html>
<head>
<title>Form Validasi</title>
<link rel="stylesheet" type="text/css" href="tampilan.css">
</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>
<!-- Move script to end of body to ensure DOM is loaded -->
<script src="apps.js"></script>
</body>
</html>

3. CSS (No Changes Needed) #

Your existing CSS works perfectly—no adjustments required here.

What Each Fix Does #

• DOMContentLoaded: Ensures our code only runs after all HTML elements are rendered, so we can safely access the form and inputs.
• event.preventDefault(): Stops the default form submission behavior, keeping the page from reloading and making your alert visible.
• Fixed Variable Name: Changing alamat to password ensures the credential check uses the actual password input value.

Now when you enter admin@example.com and 12345, you'll see the success alert. Any other combination will show the error message, and the page won't reload unexpectedly.

内容的提问来源于stack exchange，提问作者Nasya