未出现表单验证的错误消息

Question

我目前正在网站上建立一个窗口，用户可以在其中预订乘船旅行，这需要多个步骤，并且 3/5 步骤包括表单（我只在 html 中包含第一个表单，否则它会变得太长 - 见下文） .

我目前正在处理第一个表单的验证，您可以在下面看到(".availability step1") 。 我在这个验证上花了很多时间，但是，我似乎无法弄清楚如何只制作“空”，因此无效的字段会显示错误消息(.error) 。 现在它正在识别无效的那些，并且我正在将 CSS 连接到无效（我在输入字段周围获得红色边框），但是，我没有通过 html 标签，这是一个段落位于输入字段下方。

 function init() { setUpBooking(); } function setUpBooking(){ formValidation(); } function formValidation() { /* ------------ form & elements ----------- */ const form1 = document.querySelector(".availability"); window.form1 = form1; const elements = form1.elements; window.elements = elements; /* --------- delete default validation ------- */ form1.setAttribute("novalidate", true); /* ------------ custom validation ------------ */ document.querySelector(".next").addEventListener("click", (e) => { e.preventDefault(); // 1. select all inputs const formElements = form1.querySelectorAll("input, select"); /* ------------ date ------------ */ if (form1.checkValidity()) { console.log("form is valid"); // loop through form elements and check if are valid or not formElements.forEach((el) => { if (el.checkValidity()) { el.classList.add("valid"); } // enable "next" btn when form is valid var counter = 1, step = "step"; step = ".step" + counter; if (counter <= 5) { document.querySelector(step).classList.add("show"); } counter++; if (counter > 5) { counter = 5; } step = ".step" + counter; // step is the class and we are appending counter with step so that it looks like the same class in the given class(like counter 1 means step1) document.querySelector(step).classList.remove("show"); // enable "previous" btn when form is valid document.querySelector(".previous").addEventListener('click', function () { if (counter > 1) { // we don't want to remove the first step, it will always be shown step = ".step" + counter; document.querySelector(step).classList.add("show"); } counter--; if (counter < 1) { counter = 1; } step = ".step" + counter; document.querySelector(step).classList.remove("show"); }); }); } else { formElements.forEach((el) => { if (!el.checkValidity()) { console.log("form is invalid"); el.classList.add("invalid"); document.querySelector(".error").style.display = "block"; } else { el.classList.remove("invalid"); } }) } }) }

 .valid { border: 1px solid green; } .invalid { border: 1px solid red; border-top-left-radius: 3px; border-top-right-radius: 3px; } .error { text-transform: initial; margin-bottom: 20px; margin-top: -1px; border: 1px solid red; padding: 4px; z-index: 10; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; display: none; }

 <!-- AVAILABILITY --> <form class="availability step1"> <label for="date">Choose a date <input type="date" required> <p class="error date-err">Please pick a date for your tour</p> <label for="number">Choose passengers <input type="number" required> <p class="error passengers-err">Please pick a number of passengers</p> </label> <!-- PERSONAL DATA --> <form class="personalData step2"> </form> <!-- ORDER OVERVIEW --> <div class="orderOverview step3"> </div> <!-- PAYMENT --> <form class="payment step4"> </form> <!-- buttons --> <button class="previous hide">Previous</button> <button class="next">Next</button>

Answer 1

首先，对不起。 我对你的表格做了一些修改。

思路如下：

1. 在每个表单中附加一个span字段。
2. 在进入下一个表单之前，只需通过将表单编号传递给validateForm函数来检查当前表单中的每个字段是否已填写，并检查其所有输入字段是否已填写。
3. 如果是，返回真，否则返回假。

看看下面的片段：

 function validateForm(step) { // console.log(document.forms[step - 1].elements); var i, l = document.forms[step - 1].elements.length; for (i = 0; i < l; i++) { // console.log(document.forms[step - 1].elements[i].value); if (!document.forms[step - 1].elements[i].value) { // console.log("All fields should be filled"); document.getElementById("error" + step).textContent = "Fill all the fields please"; document.getElementById("error" + step).style.color = "red"; return false; } } document.getElementById("error" + step).textContent = "Form is completed"; document.getElementById("error" + step).style.color = "green"; return true; } var counter = 1, step = "step"; document.querySelector(".next").addEventListener('click', function() { step = ".step" + counter; if (validateForm(counter)) { if (counter <= 5) { document.querySelector(step).classList.add("show"); } counter++; if (counter > 5) { counter = 5; } step = ".step" + counter; // step is the class and we are appending counter with step so that it looks like the same class in the given class(like counter 1 means step1) //console.log(step); document.querySelector(step).classList.remove("show"); } }); document.querySelector(".previous").addEventListener('click', function() { if (counter > 1) { // we don't want to remove the first step, it will always be shown step = ".step" + counter; //console.log(step); document.querySelector(step).classList.add("show"); } counter--; if (counter < 1) { counter = 1; } step = ".step" + counter; document.querySelector(step).classList.remove("show"); });

 .show { display: none; }

 <!-- AVAILABILITY --> <form name="availability" class="availability step1"> <h1>Step1</h1> <label for="date">Choose a date</label> <input type="date" name="DATE" required> <label for="firstname">Enter a firstname</label> <input type="text" name="FIRSTNAME" required> <br/> <span id="error1"> </span> </form> <!-- PERSONAL DATA --> <form class="personalData step2 show"> <h1>Step2</h1> <label for="date">Choose a date</label> <input type="date" name="DATE" required> <label for="firstname">Enter a firstname</label> <input type="text" name="FIRSTNAME" required> <br/> <span id="error2"></span> </form> <!-- ORDER OVERVIEW --> <div class="orderOverview step3 show"> <h1>Step3</h1> <label for="date">Choose a date</label> <input type="date" name="DATE" required> <label for="firstname">Enter a firstname</label> <input type="text" name="FIRSTNAME" required> <br/> <span id="error3"></span> </div> <!-- PAYMENT --> <form class="payment step4 show"> <h1>Step4</h1> <label for="date">Choose a date</label> <input type="date" name="DATE" required> <label for="firstname">Enter a firstname</label> <input type="text" name="FIRSTNAME" required> <br/> <span id="error4"></span> </form> <!-- buttons --> <button class="previous hide">Previous</button> <button class="next">Next</button>