我是一个Javascript新手。我刚在Udemy上完一门Javascript课程。我需要做的项目之一是使用JavaScript的多级表单验证，但我有一些挑战。
我已经能够得到我的"下一步"one_answers"上一个"按钮工作良好。但问题是，如果任何输入值为空，如何显示错误消息。
var next = document.getElementById('firstNext')
function validate() {
next.addEventListener('click', function () {
let inputs = document.getElementById('fName');
let displayError = document.getElementsByClassName('error')
inputs.addEventListener('input', function(e) {
let inputValue = e.target.value;
if (inputValue === '') {
displayError.style.display = "block";
} else{
displayError.style.display = "none";
}
});
}, false)
}
function firstNexts() {
validate();
document.getElementById('first').style.display = "none";
document.getElementById('second').style.display = "block";
}
function secondNext() {
validate();
document.getElementById('second').style.display = "none";
document.getElementById('third').style.display = "block";
}
function thirdNext() {
validate();
document.getElementById('third').style.display = "none";
document.getElementById('last').style.display = "block";
}
function firstPrev() {
validate();
document.getElementById('second').style.display = "none";
document.getElementById('first').style.display = "block";
}
function secondPrev() {
validate();
document.getElementById('third').style.display = "none";
document.getElementById('second').style.display = "block";
}
function lastPrev() {
validate();
document.getElementById('last').style.display = "none";
document.getElementById('third').style.display = "block";
}.body{
background-color: #1f2833;
color: white;
align-content: center;
}
section{
height: 320px;
width: 50%;
margin: auto;
color: white;
background-color: #c6c5c7;
align-content: center;
}
.header{
color: white;
text-align: center;
margin: 0px auto;
padding: 10px;
width: auto;
}
#first{
padding: 20px;
border: none;
border-radius: 8px;
}
#second, #third, #last{
display: none;
align-content: center;
padding: 20px;
border: none;
border-radius: 8px;
}
.top{
padding: 10px;
text-align: center;
}
.input{
margin-top:20px;
padding: 5px;
width:100%;
height: 30px;
}
.firstNext, .secondNext, .thirdNext{
float: right;
margin-top: 10px;
padding: 5px;
background-color: #45a29e;
color: #ffffff
}
.firstNext:hover{
background-color: red;
}
.firstPrev, .secondPrev, .lastPrev{
float: left;
margin-top: 10px;
padding: 5px;
background-color: #4428e2;
color: #ffffff
}
.firstNext:hover, .secondtNext:hover, .thirdNext:hover{
background-color: red;
}
.error{
font-size: 8px;
color: red;
margin: 0px 5px;
display: none;
}
.input:hover, .input:active{
border: red 2px solid;
}
.submit{
float: right;
margin-top: 10px;
padding: 5px;
background-color: #e22828;
color: #ffffff
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Multi-step Registration Form</title>
</head>
<body class="body">
<div class="container">
<div class="header">
<h1>Multi-step Registration Form</h1>
<h3>Pls fill in the following</h3>
</div>
<section>
<form method="GET" onsubmit="validate()">
<fieldset id="first">
<h2 class="top">Personal Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
<p class="error"> This field cannot be empty!</p>
<div><input type="button" name="next" value="Next" class="firstNext" id="firstNext" onclick="firstNexts()"></div>
</fieldset>
<fieldset id="second">
<h2 class="top">Academic Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
<p class="error"> This field cannot be empty!</p>
<div><input type="button" name="next" value="Previous" class="firstPrev" onclick="firstPrev()"></div>
<div><input type="button" name="next" value="Next" class="secondNext" onclick="secondNext()"></div>
</fieldset>
<fieldset id="third">
<h2 class="top">Account Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
<p class="error"> This field cannot be empty!</p>
<div><input type="button" name="next" value="Previous" class="secondPrev" onclick="secondPrev()"></div>
<div><input type="button" name="next" value="Next" class="thirdNext" onclick="thirdNext()"></div>
</fieldset>
<fieldset id="last">
<h2 class="top">Login Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<p class="error"> This field cannot be empty!</p>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
<p class="error"> This field cannot be empty!</p>
<div><input type="button" name="next" value="Previous" class="lastPrev" onclick="lastPrev()"></div>
<div><input type="button" name="next" value="submit" class="submit"></div>
</fieldset>
</form>
</section>
</div>
</body>
</div>我在控制台中没有得到任何错误，但验证不起作用。如果你能帮我，我会很感激的。谢谢你。
在你原有的基础上，我创造了一些我认为可能对你更好的东西。它在javascript方面有点重，但简化了HTML。这个解决方案并不意味着包罗万象，但肯定会给你一些工作。我把样式和其他一些东西去掉了。
为了你的方便，我还创建了一个工作的Codepen。
HTML:
<form>
<fieldset id="first">
<h2 class="top">Personal Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
</fieldset>
<fieldset id="second">
<h2 class="top">Academic Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
</fieldset>
<fieldset id="third">
<h2 class="top">Account Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
</fieldset>
<fieldset id="fourth">
<h2 class="top">Login Details</h2>
<input type="text" name="firstName" class="input" id="fName" placeholder="First Name..."><br>
<input type="text" name="firstName" class="input" id="mName" placeholder="Middle Name..."><br>
<input type="text" name="firstName" class="input" id="lName" placeholder="Last Name..."><br>
</fieldset>
<input id="prev-btn" type="button" value="Previous">
<input id="next-btn" type="button" value="Next">
<input id="submit-btn" type="submit" value="Submit">
</form>
我已经删除了所有的错误p标签，并删除了任何重复的下一步和上一个按钮。在表单的底部，我们只需要这些按钮的一个版本。
现在事情变得古怪了，我们将在这里严重依赖JavaScript来使我们的工作更轻松。我可以写一个100页的故事来讲述那里发生了什么，但我希望你在评论区提问，如果有什么不清楚的地方。但是，从高层次的角度来看，如果用户没有填写所有字段，我们就不允许他们通过当前部分。当他们按下next按钮时，我们验证这些字段，如果它们是错误的，则将p标记附加到DOM中。一旦他们完成了该部分的所有字段，他们就可以自由地继续前进。
JS:
const form = document.querySelector('form')
const nextButton = document.getElementById('next-btn')
const prevButton = document.getElementById('prev-btn')
const submitButton = document.getElementById('submit-btn')
const sections = ['first', 'second', 'third', 'fourth']
let currentSectionIdx = 0
let hasErrors = false
nextButton.onclick = (e) => {
const currentSection = document.getElementById(sections[currentSectionIdx])
validate(currentSection)
if(hasErrors) {
return
}
currentSectionIdx++
const nextSection = document.getElementById(sections[currentSectionIdx])
currentSection.style.display = 'none'
nextSection.style.display = 'block'
if(currentSectionIdx === sections.length - 1) {
nextButton.style.display = 'none'
submitButton.style.display = 'initial'
} else if(currentSectionIdx === 1) {
prevButton.style.display = 'initial'
}
}
prevButton.onclick = (e) => {
const currentSection = document.getElementById(sections[currentSectionIdx])
currentSectionIdx--
const prevSection = document.getElementById(sections[currentSectionIdx])
currentSection.style.display = 'none'
prevSection.style.display = 'block'
if(currentSectionIdx === 0) {
prevButton.style.display = 'none'
} else if(currentSectionIdx === sections.length - 2) {
nextButton.style.display = 'initial'
submitButton.style.display = 'none'
}
}
function validate(section) {
const inputs = Array.from(section.querySelectorAll('input'))
let errors = false
for(const input of inputs) {
const nextSibling = input.nextSibling
if(nextSibling.className === 'error') {
nextSibling.remove()
}
}
for(const input of inputs) {
if(input.value.trim() === '') {
errors = true
const p = document.createElement('p')
p.className = 'error'
const txt = document.createTextNode('This field cannot be empty!')
p.appendChild(txt)
input.after(p)
}
}
if(errors) hasErrors = true
else hasErrors = false
}
form.onsubmit = e => {
e.preventDefault()
const currentSection = document.getElementById(sections[currentSectionIdx])
validate(currentSection)
if(hasErrors) {
return
}
console.log('lol')
}