使用 Javascript 進行多級表單驗證
[英]Multi-Level Form Validation Using Javascript
問題描述
我是Javascript的新手，剛學完Udemy的Javascript課程。 我需要做的項目之一是使用 JavaScript 進行多級表單驗證，但我遇到了一些挑戰。
我已經能夠讓我的“下一個”和“上一個”按鈕正常工作。 但問題是如果任何輸入值為空，如何顯示錯誤消息。
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>
我在控制台中沒有收到任何錯誤，但驗證不起作用。 如果你能幫助我，我將不勝感激。 謝謝。
1 個解決方案
解決方案1
0 已采納 2021-08-26 17:46:13
從你最初擁有的東西出發，我創造了一些我認為可以更好地為你服務的東西。 它在 javascript 方面有點重，但簡化了 HTML。這個解決方案並不意味着包羅萬象，但肯定會給你一些東西。 我留下了 styles 和其他一些東西。
為了您的方便，我還創建了一個可用的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 頁的故事來講述里面發生的事情，但如果有任何不清楚的地方，我更希望你在評論部分提問。 但是，從高層次的角度來看，如果用戶沒有填寫所有字段，我們不允許他們 go 通過當前部分。 當他們按下下一步按鈕時，我們會驗證這些字段，如果它們是錯誤的，我們會將 append 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')
}
使用多級源映射調試Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.