How to show all error messages on the same submit click (form)-CodePudding

Here we go for my first ever question on Stackoverflow !!! I am a JS student for 2 weeks....

I searched on the forum but doesn't find anything, I think because I don't really know how to formulate my question.

So, I have a html form which I validate all inputs with some JS. When the form is empty and user clic on submit button, the first error message on the first input is shown but nothing to the others empty inputs. When the first is OK but not the second, the error message appear on the second input, but nothing on the third, etc etc...

What I try is, when a user clic on the submit button and all the form is empty, all messages of all empty inputs are shown. I have no idear how I can do that.

Can you give me an advice ?

Thank you all !!!

A last thing, I only can use vanilla javascript to do this !

Here is my code:

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;
}
```

CodePudding user response：

Whenever your validation function finds an error it returns false, which breaks off the validation function then and there. So only the first error is detected and displayed. You should remove these return false statements and only return false at the end if there was 1 or more errors.

CodePudding user response：

Key here is do not return validation success right after first field validation. Complete all fields validation.

Check below stackblitz solution for you. And accept the answer if it works. (Solution is in angular. However, you can easily copy paste to javascript)

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