登录提交按钮密码验证后跳转实现及故障排查

Hey there! Let's break down your questions and fix the login issue you're facing.

To make your login button redirect after successful password validation, follow these core steps:

• Capture the login action: Attach a click handler to your submit button (or listen for the form's submit event) to run your validation logic.
• Validate credentials: Retrieve the username and password values from the input fields, then check if they match your expected values.
• Redirect on success: If validation passes, use location.href or location.replace() to send the user to the target page. Important: Always include the full URL protocol (like https://) for external sites—otherwise browsers will treat it as a relative path.

Looking at your code, there are 3 key issues causing the failed redirect:

1. Unhandled form submission default behavior #

Your button uses type="submit", which triggers the form's default submit action (refreshing the page) before your validate() function can complete the redirect. This cuts off the redirect logic entirely.

2. Incomplete redirect URL #

You're using location.replace("www.youtube.com")—without the https:// protocol prefix, the browser treats this as a relative path (looking for a file/folder named www.youtube.com in your current directory) instead of an external website.

3. Broken button HTML structure #

Your button tag is self-closed (<button ... />) and the "Submit" text is placed outside the button element. This means the button itself is empty, and clicking the visible text won't actually trigger the onclick="validate()" handler.

Fixed Code #

Here's the corrected version of your code with all issues resolved:

<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(event) {
  // Prevent default form submission (page refresh)
  event.preventDefault();
  
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  if (username == "Joshua" && password == "Joshua#123") {
    alert("Login successfully");
    // Use full URL with https:// protocol
    location.replace("https://www.youtube.com"); // Redirecting to other page.
  } else {
    attempt--; // Decrementing by one.
    alert("You have " + attempt + " attempt left;");
    // Disabling fields after 3 attempts.
    if (attempt == 0) {
      document.getElementById("username").disabled = true;
      document.getElementById("password").disabled = true;
      document.getElementById("submit").disabled = true;
      return false;
    }
  }
}
</script>
<script src="js/login.js"></script>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform" onsubmit="validate(event)">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<button type="submit" value="Login" id="submit">
  <b><i>Submit</i></b>
</button>
</form>
</div>
</div>
</body>
</html>

Key Changes Explained: #

• Added event.preventDefault() in validate() to stop the form from refreshing the page before the redirect runs.
• Updated the redirect URL to include https:// so the browser recognizes it as an external website.
• Fixed the button structure: moved the "Submit" text inside the button tag, removed the self-closing slash, and added onsubmit="validate(event)" to the form (so validation runs even if the user presses Enter instead of clicking the button).

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