英文:
Attempting to .push() these errror messages to show but im doing something wrong that my eye is not catching. No error messages so kinda lost
问题
I will only translate the non-code part for you:
"尝试进行简单的表单验证，但我始终无法让这些错误消息显示出来。是否有更有经验的人可以帮助我找出我做错了什么，或者是否有更好/更简单的方法来显示这些错误消息... 我正在尝试从if语句中使用.push()将字符串推送出来，如果不满足要求，但我只是看不到任何东西显示出来。可能是因为我如何设置css显示，但我现在完全不确定要查找的位置... 新手尝试掌握基础的JavaScript。"
英文:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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')
}
<!-- language: lang-css -->
body {
background-color: silver;
text-align: center;
margin-top: 20%;
color: black;
}
.error {
display: none;
}
.error .show {
display: block;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
.show不是.error的后代，所以不是.error .show（这意味着所有具有show类的元素都位于具有error类的元素内部，将具有该样式，而由于您的错误不位于其内部，所以没有样式）
您需要使用.error.show（这意味着同时具有error和show类的所有元素都将根据您为此选择器指定的规则进行样式设置）
这是您提供的代码的翻译部分。
英文:
.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)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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')
}
<!-- language: lang-css -->
body {
background-color: silver;
text-align: center;
margin-top: 20%;
color: black;
}
.error {
display: none;
}
.error.show {
display: block;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论