模式表单检查错误但不提交或提交但不检查错误

Question

我正在在线学习Javascript，我阻止了这个验证模态表单。有人能帮忙吗?

我有一个要提交的表单，我创建了一个函数来检查输入，它工作了，然后当我提交时，它什么也不做

实际上，我认为我必须使用if语句与"isFormValid"但我不知道该插在哪里，怎么插。我试图插入这个"isFormValid"所有的函数，但因为它的形式不再检查输入…

const form = document.getElementById("form");
const successPopupClose = document.querySelector(".close-success")
const errorMsg = document.querySelectorAll(".error");
const successIcon = document.querySelectorAll(".success-icon");
const failureIcon = document.querySelectorAll(".failure-icon");
let successMsg = document.getElementById("success-popup");
let firstName = document.getElementById("first");
let lastName = document.getElementById("last");
let email = document.getElementById("email");
let birthdate = document.getElementById("birthdate");
let checkbox1 = document.getElementById("checkbox1");
let quantity = document.getElementById("quantity")
let city = document.reserve.location;
let isFormValid = false;
form.addEventListener("submit", (e) => {
e.preventDefault();
checkInputs(); 

// if(isFormValid) {
//   modalbg.remove();
//   successMsg.style.display = 'block';
})
function checkInputs() {
// Validate first name
if(firstName.value.trim() === ''){
errorMsg[0].innerHTML = 'Veuillez entrer au moins 2 caractères';
failureIcon[0].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[0].innerHTML = '';
failureIcon[0].style.opacity = "0";
successIcon[0].style.opacity = "1";
isFormValid = true;
}
// Validate last name
if(lastName.value.trim() === ''){
errorMsg[1].innerHTML = 'Veuillez entrer au moins 2 caractères';
failureIcon[1].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[1].innerHTML = '';
failureIcon[1].style.opacity = "0";
successIcon[1].style.opacity = "1";
isFormValid = true;
}

// Validate email name
if(email.value.trim() === ''){
errorMsg[2].innerHTML = 'Vous devez entrer une address mail';
failureIcon[2].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[2].innerHTML = '';
failureIcon[2].style.opacity = "0";
successIcon[2].style.opacity = "1";
isFormValid = true;
}
// Validate birthday
if(birthdate.value === ''){
errorMsg[3].innerHTML = 'Vous devez entrer une date de naissance';
isFormValid = false;
} else {
errorMsg[3].innerHTML = '';
successIcon[3].style.opacity = "1";
isFormValid = true;
}
// Validate quantity
if(quantity.value === ''){
errorMsg[4].innerHTML = 'Ce champ ne peut pas être vide';
failureIcon[4].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[4].innerHTML = '';
failureIcon[4].style.opacity = "0";
successIcon[4].style.opacity = "1";
isFormValid = true;
}
// Validate location
for (i=0; i<city.length; i++) {
if(city[i].checked==true){
errorMsg[5].innerHTML = '';
isFormValid = true;
break;
}
else {
errorMsg[5].innerHTML = "Vous devez choisir une option";
isFormValid = false
//  return false;
}
}
// Validate checkbox
if(checkbox1.checked) {
errorMsg[6].innerHTML = '';
isFormValid = true;
} else {
errorMsg[6].innerHTML = "Vous devez accepter les conditions d'utilisation";
isFormValid = false
}
}

Answer 1

我找到了答案，问题是我没有一个if语句来验证所有的条件

const form = document.getElementById("form");
const successPopupClose = document.querySelector(".close-success")
const errorMsg = document.querySelectorAll(".error");
const successIcon = document.querySelectorAll(".success-icon");
const failureIcon = document.querySelectorAll(".failure-icon");
let successMsg = document.getElementById("success-popup");
// eveny submit form
form.addEventListener("submit", (e) => {
e.preventDefault();
checkFirstName();
checkLastName();
checkEmail();
checkBirthdate();
checkQuantity();
checkLocation();
checkboxValidation();
if(
checkFirstName() && checkLastName() && checkEmail() && checkBirthdate() && checkQuantity() && checkLocation() && checkboxValidation()
) {
modalbg.remove();
successMsg.style.display = 'block';
}
});

// check first name
function checkFirstName() {
let firstName = document.getElementById("first-name");
if(firstName.value.trim() === ''){
errorMsg[0].innerHTML = 'Veuillez entrer au moins 2 caractères';
failureIcon[0].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[0].innerHTML = '';
failureIcon[0].style.opacity = "0";
successIcon[0].style.opacity = "1";
isFormValid = true;
}
// check last name
function checkLastName() {
let lastName = document.getElementById("last-name");
if(lastName.value.trim() === ''){
errorMsg[1].innerHTML = 'Veuillez entrer au moins 2 caractères';
failureIcon[1].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[1].innerHTML = '';
failureIcon[1].style.opacity = "0";
successIcon[1].style.opacity = "1";
isFormValid = true;
}
// check email 
function checkEmail() {
let emailData = document.getElementById("emailData");
if(email.value.trim() === ''){
errorMsg[2].innerHTML = 'Vous devez entrer une address mail';
failureIcon[2].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[2].innerHTML = '';
failureIcon[2].style.opacity = "0";
successIcon[2].style.opacity = "1";
isFormValid = true;
}
// check birthday
function checkBirthdate() {
let birthdateData = document.getElementById("birthdateData");
if(birthdate.value === ''){
errorMsg[3].innerHTML = 'Vous devez entrer une date de naissance';
isFormValid = false;
} else {
errorMsg[3].innerHTML = '';
successIcon[3].style.opacity = "1";
isFormValid = true;
}
// check quantity
function checkQuantity() {
let quantityData = document.getElementById("quantityData");

if(quantity.value === ''){
errorMsg[4].innerHTML = 'Ce champ ne peut pas être vide';
failureIcon[4].style.opacity = "1";
isFormValid = false;
} else {
errorMsg[4].innerHTML = '';
failureIcon[4].style.opacity = "0";
successIcon[4].style.opacity = "1";
isFormValid = true;
}
// check location
function checkLocation() {
let locationData = document.getElementById("locationData");
for (i=0; i<locationData.length; i++) {
if(locationData[i].checked==true){
errorMsg[5].innerHTML = '';
isFormValid = true;
break;
}
else {
errorMsg[5].innerHTML = "Vous devez choisir une option";
isFormValid = false
}
}
// check checkbox
function checkboxValidation() {
let checkbox1Data = document.getElementById("checkbox1Data");
if(checkbox1.checked) {
errorMsg[6].innerHTML = '';
isFormValid = true;
} else {
errorMsg[6].innerHTML = "Vous devez accepter les conditions d'utilisation";
isFormValid = false
}
}