Question 292965 in Html Question posted in
Some basic documentation can be found here.

Html – signup button doesn't redirect to my login page, how can i fix this? i'm a beginner at javascript coding

i want to know what’s the problem and how i can rewrite the code to make it work! please and thank you in advance!

this is my html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Registration</title>
    <link rel="stylesheet" href="signup.css">
</head>
<body>
    <form id="signupForm">
        
        <h2>Welcome! Sign up here.</h2>

        <input type="text" id="name" placeholder="User Name">
        <p id="outputName"></p>
        
        <input type="date" id="birthday" placeholder="Birth date">
        
        <input type="address" id="address" placeholder="Address">
        <p id="outputAddress"></p>
        
        <input type="number" id="phoneNumber" placeholder="Phone Number">
        <p id="outputPhoneNumber"></p>
        
        <input type="email" id="email" placeholder="Email">
        <p id="outputEmail"></p>
        
        <input type="password" id="pass" placeholder="Password">
        <p id="outputPass"></p>
        
        <input type="password" id="confirm-pass" placeholder="Re-enter Password">
        <p id="outputConfPass"></p>
        
        <button id="submit" onclick="validateForm()">Register</button>

    </form>
    <script src="signup.js"></script>
</body>
</html>

this is my javascript code

function validateForm() {
  // Username validation
  let username = document.getElementById("name1");
  if (username == '') {
    document.getElementById("outputName").innerHTML = "The username field must be filled out!";
  }

  // Address validation
  let address = document.getElementById("address1");
  if (address == '') {
    document.getElementById("outputAddress").innerHTML = "The address field must be filled out!";
  }

  // Phone number validation
  let phoneNum = document.getElementById("phoneNumber");
  let numFormat = /^d{11}$/;
  if (phoneNum.value.match(numFormat)) {
    document.getElementById("outputPhoneNumber").innerHTML = "Number confirmation successful!"
  } else {
    document.getElementById("outputPhoneNumber").innerHTML = "Invalid phone number format!";
  }

  // Email validation
  let email = document.getElementById("email");
  let emailFormat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

  if (email.value.match(emailFormat)) {
    document.getElementById("outputEmail").innerHTML = "Valid email address!";
  } else {
    document.getElementById("outputEmail").innerHTML = "Invalid email address!";
  
  }

  // Password validation
  let password = document.getElementById("pass");
  let confirmPass = document.getElementById("confirm-pass");
  let passFormat = /^(?!.*s).{8}$/;

  if (password.value.match(passFormat)) {
    document.getElementById("outputPass").innerHTML = "Password must be atleast 8 characters with one special character";
    
  } else if (password != confirmPass) {
    document.getElementById("outputPass").innerHTML = "Your password does not match!";
   
  } else { //Submit form
    document.getElementById("signupForm").addEventListener("submit", function (event) { 
      event.preventDefault();
    
      window.location.href = "/login.html";
    });
  }
}

i tried searching the internet for solutions but i cant seem to find anything, i’ve tried for 2 days now and i still cant do anything to fix it.

Tags:

2

Answers


  1. 0

    Three things:
    One, you use location.href, not window.location.href,
    Two, you’ll need to stop the default action by adding ‘type="button"’ to the button,
    Three, some of the field validation logic don’t work, ‘password, confirm-password’

    Login or Signup to reply.
  2. 0

    You might consider using form action instead of window.location.href to navigate to different page.

    <form action="/login.html">
    <input type="text" id="name" placeholder="User Name">
    <p id="outputName"></p>
        
    <input type="date" id="birthday" placeholder="Birth date">
        
    <input type="address" id="address" placeholder="Address">
    <p id="outputAddress"></p>
        
    <input type="number" id="phoneNumber" placeholder="Phone Number">
    <p id="outputPhoneNumber"></p>
        
    <input type="email" id="email" placeholder="Email">
    <p id="outputEmail"></p>
        
    <input type="password" id="pass" placeholder="Password">
    <p id="outputPass"></p>
        
    <input type="password" id="confirm-pass" placeholder="Re-enter Password">
    <p id="outputConfPass"></p>
        
    <button id="button" type="button" onclick="validateForm()">Register</button>
</form>

    and your JavaScript will be:

    if (password.value.match(passFormat)) {
    document.getElementById("outputPass").innerHTML = "Password must be atleast 8 characters with one special character";
    
} else if (password != confirmPass) {
    document.getElementById("outputPass").innerHTML = "Your password does not match!";
   
} else { //Submit form
    alert("Welcome User!");
}

    Note that I have removed the "submit" event listener as there is already onClick which fires the function when you clicked on the button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search