Any ideas why my login wont validate my value nor goes to signup form?-CodePudding

Im still new on the whole coding and Im trying to make form validation, data validation and constraint validation for the registration form and log in

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title> Scripting </title>
</head>
<body>
<form>
<label for="username">Username</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password" pattern=".{8,}"><br><br>
<input type="button" value="Login" onclick="checkLogin()">
</form>
<p>Don't have an account? <a href="#" onclick="showSignupForm()">Register here</a></p>
</body>

<script>
function checkLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if (username == "admin" && password == "1234") {
alert("Successfully Logged In!");
}else {
alert("We cannot find your account!");
    }
}
function showSignupForm() {
var signupForm = document.createElement("form");
signupForm.innerHTML = 
"<label for='firstname'>Firstname</label><br>"  
"<input type='text' id='firstname' name='firstname'><br>"  
"<label for='lastname'>Lastname</label><br>"  
"<input type='text' id='lastname' name='lastname'><br>"  
"<label for='birthdate'>Birthdate</label><br>"  
"<input type='date' id='birthdate' name='birthdate'><br>"  
"<label for='email'>Email</label><br>"  
"<input type='email' id='email' name='email'><br>"  
"<label for='contact'>Contact</label><br>"  
"<input type='tel' id='contact' name='contact'><br><br>"  
"<input type='submit' value='Register' onclick='submitSignup()'>;

document.body.appendChild(signupForm);
}

function submitSignup() {

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var birthdate = document.getElementById("birthdate").value;
var email = document.getElementById("email").value;
var contact = document.getElementById("contact").value;

if (firstname && lastname && birthdate && email && contact) {
    alert("Registration Complete!");
    } else {
    alert("Fill up the form first!");
    }
    }
    </script>
    </html>

Ive been checking and rechecking, it was supposedly to show alert notification that I've logged and clicking "register here" puts me on the registration form but it didnt do anything

CodePudding user response：

If you are trying this with multiple websites and hyperlinks, you will have to change the hyperlink href section from "#" into another website, but if you are doing it on a single website, I think you need to include .innerHTML and div tags so you can include code from JS to HTML but you will need to include an ID to the div so you can use document.getElementByID("").innerHTML. Also I realised your login page wasn't displaying any text so try to use the .innerHTML suffix so you can input JS elements to HTML displaying it, PHP might also work but I recommend using Java Script .innerHTML suffix.

(ps. I am also a bit of a beginner so i hope i someway gave an understanding.)

CodePudding user response：

You didn't close the quote for this

"<input type='submit' value='Register' onclick='submitSignup()'>";