Why isn't the 'confirm password and password the same' part working? Meaning, the part that uses the 'getElementById' to adress the password and confirmpassword. Every part works but that particular part. It doesn't show a red box around the text fields. Can anyone help me?
<html>
<head>
</head>
<script>
function submitinfo()
{
var firstname =
document.getElementById("firstname").value;
var lastname =
document.getElementById("lastname").value;
var username =
document.getElementById("username").value;
var password =
document.getElementById("password").value;
var confirmpassword =
document.getElementById("confirmpassword").value;
var email =
document.getElementById("email").value;
if(firstname !== "" &&
document.getElementById("firstname").style.borderColor == "red")
{
document.getElementById("firstname").style.border = "none"
}
if(lastname !== "" &&
document.getElementById("lastname").style.borderColor == "red")
{
document.getElementById("lastname").style.border = "none"
}
if(username !== "" &&
document.getElementById("username").style.borderColor == "red")
{
document.getElementById("username").style.border = "none"
}
if(password !== "" &&
document.getElementById("password").style.borderColor == "red")
{
document.getElementById("password").style.border = "none"
}
if(confirmpassword !== "" &&
document.getElementById("confirmpassword").style.borderColor == "red")
{
document.getElementById("confirmpassword").style.border = "none"
}
if(email !== "" &&
document.getElementById("email").style.borderColor == "red")
{
document.getElementById("email").style.border = "none"
}
if(firstname == "")
{
document.getElementById("firstname").style.borderColor = "red";
document.getElementById("firstname").style.borderStyle = "solid";
}
if(lastname == "")
{
document.getElementById("lastname").style.borderColor = "red";
document.getElementById("lastname").style.borderStyle = "solid";
}
if(username == "")
{
document.getElementById("username").style.borderColor = "red";
document.getElementById("username").style.borderStyle = "solid";
}
if(password == "")
{
document.getElementById("password").style.borderColor = "red";
document.getElementById("password").style.borderStyle = "solid";
}
if(confirmpassword == "")
{
document.getElementById("confirmpassword").style.borderColor = "red";
document.getElementById("confirmpassword").style.borderStyle = "solid";
}
if(email == "")
{
document.getElementById("email").style.borderColor = "red";
document.getElementById("email").style.borderStyle = "solid";
}
if(password !== "" && confirmpassword !== "" &&
document.getElementById("password").style.border == "none" &&
document.getElementById("confirmpassword").style.border == "none" && password !== confirmpassword) {
document.getElementById("password").style.border = "red";
document.getElementById("confirmpassword").style.border = "red"; }
if(firstname && lastname && username && password && confirmpassword && email !== "")
{
window.open()
}
}
</script>
<h><font size=4 color=3BCCBE><b>Full Name</b></font><h/>
<br>
<input type="text" id="firstname" size="15px" placeholder="First">
<input type="text" id="lastname" size="15px" placeholder="Last">
<br> <br> <br> <br>
<h><font size=4 color=3BCCBE><b>Choose your username</b></font></h>
<br>
<input type="text" id="username" size="37px">
<br>
<p><font size=3 color="grey">atleast 6 characters long</font></p>
<br>
<h><font size=4 color=3BCCBE><b>Create a password</b></font></h>
<br>
<input type="password" id="password" size="37px">
<br> <br> <br> <br>
<h><font size=4 color=3BCCBE><b>Confirm your password</b></font><h/>
<br>
<input type="password" id="confirmpassword" size="37px">
<br> <br> <br> <br>
<h><font size=4 color=3BCCBE><b>Email address</b></font><h/>
<br>
<input type="text" id="email" size="37px">
<br> <br> <br> <br>
<input type="button" value="Submit" onclick="submitinfo()" style="height:50px; width:85px; font-size:22px;>
<br>
</body>
</html>
