如何在同一提交点击(表单)上显示所有错误消息

这是我关于Stackoverflow的第一个问题！！！我在JS学习了两周。。。。

我在论坛上搜索了一下，但没有找到任何东西，我想是因为我真的不知道如何表达我的问题。

因此，我有一个html表单，我用一些JS验证所有输入。当表单为空并且用户点击提交按钮时，第一个输入上的第一条错误消息会显示出来，而其他空输入则不会显示。当第一个OK但第二个不OK时，错误消息出现在第二个输入上，但在第三个输入上什么都没有，等等。

我尝试的是，当用户点击提交按钮，所有表单都为空时，所有空输入的消息都会显示出来。我不知道该怎么做。

你能给我个建议吗？

谢谢大家！！！

最后一件事，我只能使用香草javascript来做这件事！

这是我的代码：

function editNav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
// DOM Elements
const modalbg = document.querySelector(".bground");
const modalBtn = document.querySelectorAll(".modal-btn");
const formData = document.querySelectorAll(".formData");
//VARIABLES
const xButton = document.querySelector(".close"); // Bouton croix
// const subButton = document.querySelector(".btn-submit"); //Bouton submit
let firstName = document.querySelector("#firstName"); // Prénom
let lastName = document.querySelector("#lastName"); // Nom
let email = document.querySelector("#email"); //Email
let birthdate = document.querySelector("#birthdate"); //Date de naissance
let nbrTournaments = document.querySelector("#quantity"); //Nbr tournois
let myForm = document.querySelector("#reserve"); //Formulaire complet
let emailError = document.querySelector(".mail-error"); //Erreur email
let firstNameError = document.querySelector('.firstname-error'); //Erreur prénom
let lastNameError = document.querySelector('.lastname-error'); //Erreur nom
let tournamentError = document.querySelector('.tournament-error'); //Erreur nbr tournois
let radioError = document.querySelector(".radio-button-error");//Erreur checkbox
let radioButton = document.forms[0].location;//Radio button
let birthdateError = document.querySelector(".birthdate-error");
let checkboxError = document.querySelector(".checkbox-error");
let checkbox = document.querySelector("#checkbox1");
let errorMsg = document.querySelectorAll(".errormsg");
let allInput = document.forms[0].input; //Tous les inputs
//REGEXP
let emailRegExp = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
let dateRegExp =/^d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
//MODAL
// launch modal event
modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
// close modal event
xButton.addEventListener("click", closeModal);
// launch modal form
function launchModal() {
modalbg.style.display = "block";
}
// close modal form
function closeModal() {
modalbg.style.display = "none";
}
//VALIDATION FORMULAIRE
function validate() {
//Validation formulaire entier
if (allInput == null) {
return false
}
// Validation Prenom
if (firstName.value == "") {
firstNameError.innerHTML = "Votre prénom doit contenir 2 caractères ou plus.";
return false;
}
// Validation Nom
if (lastName.value == "") {
lastNameError.innerHTML = "Votre nom doit contenir 2 caractères ou plus!";
return false;
}
//Validation Mail
let testEmail = emailRegExp.test(email.value);
if (testEmail === false) {
emailError.innerHTML = "Veuillez saisir une adresse email valide.";
return false;
}
//Validation Date de naissance
let testDate = dateRegExp.test(birthdate.value);
if (testDate === false) {
birthdateError.innerHTML = "Veuillez entrer votre date de naissance.";
return false;
}
//Validation nombre de tournois
if (nbrTournaments.value === "") {
tournamentError.innerHTML = "Veuillez entrer un nombre";
return false;
}
//Validation Radio Button
//Boucle vérifier
let valid = false;
for(let i = 0; i < radioButton.length; i++) {
if (radioButton[i].checked){
valid = true;
break;
}
}
if(valid) {
radioError.innerHTML = ""
} else {
radioError.innerHTML = "Veuillez choisir une option";
return false;
}
//Validation Checkbox
if (checkbox.checked === false) {
checkboxError.innerHTML = "Veuillez lire et valider les conditions."
return false;
}
alert('Merci ! Votre réservation a bien été envoyée.')
return true;
}
```

每当验证函数发现错误时，它都会返回false，从而立即中断验证函数。因此，只检测并显示第一个错误。您应该删除这些return false语句，并且只有在出现1个或多个错误时才在末尾返回false。

对于验证简单表单，您只需要知道：

如何进行需求
- 选择控件(抱歉长时间解释(
- 无线电控制(抱歉解释太久(
- 复选框控件(抱歉长时间解释(
- 输入控制(参见以下示例(
样式css禁用表单提交按钮或输入(参见下面的示例(
阅读关于2个事件的文档(参见下面的示例(
- w3school-oninput事件
- w3school oninvalid事件

要获得帮助，请举一个小例子：

<form onSubmit="onSubmit()">
<input type="text" placeholder="username" oninvalid="InvalidMsg(event)" oninput="InvalidMsg(event)" required>
<div>
<input type="paswword" placeholder="password" oninvalid="InvalidMsg(event)" oninput="InvalidMsg(event)" pattern="[0-9]{5}" required>
<small>The password format is 5 digits length</small>
</div>
<button type="submit">valider</button>
</form>

const InvalidMsg = function(e) {
const elem = e.target
elem.classList.remove('error')
elem.classList.remove('success')
if (!elem.validity.valueMissing && !elem.validity.patternMismatch) {
elem.classList.add('success')
} else {
elem.classList.add('error')
}
}
window.addEventListener("load", function() {
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault()
alert('ok')
})
})

input{
outline: none;
border:solid 1px gray;
}
.error{
border-left: solid 3px red;
}
.success{
border-left: solid 3px green;
}
form:invalid button[type="submit"], form:invalid input[type="submit"] {
opacity: 0.5;
cursor: default;
}

这里的关键是不要在第一个字段验证后立即返回验证成功。完成所有字段的验证。

请查看下面的stackblitz解决方案。如果答案有效，就接受它。(解决方案是有角度的。但是，你可以很容易地复制粘贴到javascript(

https://stackblitz.com/edit/form-submit-simple-bs2xen?file=app%2Fapp.component.ts

相关内容

最新更新

热门标签：