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>.show is not a descendant of .error, so instead of
.error .show (which means that all elements having the show class inside elements having an error class will have that style and since your error is not inside of itself, nothing gets the style)
you will need
.error.show (which means that all elements having the error and the show class at the same time will be styled via the rules you specified for this selector)
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>