trying to do simple form verification and for the life of me cant get these error messages to show up. Could someone with more experience assist me in what I am doing wrong or if there is a better/simpler way to show these error messages ..im trying to .push() the strings from the if state if requirements are not met but i am just not seeing anything show up. Possibly how im doing the css display but im just not entirely sure where to look at this point…New to javascript trying to get the basic down
let terms = document.getElementById('terms')
const username = document.getElementById('username')
const password = document.getElementById('password')
const form = document.getElementById('form')
let errorList = document.getElementById('error-list')
let errorContainer = document.getElementById('error')
const errorMessages = []
form.addEventListener('submit', (e) => {
e.preventDefault()
if (username.value.length < 5) {
errorMessages.push('Username must be more than 5 characters')
}
if (password.value.length < 5) {
errorMessages.push('Password must be more than 5 characters')
}
if (errorMessages.length > 0) {
showErrors(errorMessages)
e.preventDefault()
}
})
function showErrors(errorMessages) {
errorMessages.forEach((errorMessage) => {
const li = document.createElement('li')
li.innerText = errorMessage
errorList.appendChild(li)
})
errorContainer.classList.add('show')
}
body {
background-color: silver;
text-align: center;
margin-top: 20%;
color: black;
}
.error {
display: none;
}
.error .show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<!--start of the form -->
<form action="" id="form">
<!-- Error Container-->
<div id="error" class="error">
<ul id="error-list" class="error-list"></ul>
</div>
<!-- inputs below-->
<div>
<input required type="text" id="username" />
</div>
<div>
<input required type="password" name="password" id="password" />
</div>
<div>
<label for="terms">Terms & Conditions</label>
<input type="checkbox" name="terms" id="terms" />
</div>
<!--submit button-->
<button type="submit" id="button">submit</button>
</form>
</body>
</html>