Message d'alerte après vérification d'étapes d'un formulaire

Fermé
ViteRuve - Modifié le 11 janv. 2022 à 12:17
Bonjour tout le monde :)

Je suis en train de faire un formulaire qui affiche un message d'erreur si les cases sont vides ou si l'adresse émail est incomplète.

Cette partie du fonctionne parfaitement :

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');


form.addEventListener('submit', e => {
e.preventDefault();

checkInputs();
});

function checkInputs(){
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();


if(usernameValue === '') {
setErrorFor(username, 'Please, enter your username.');
} else {
setSuccessFor(username);
}

if(emailValue === '') {
setErrorFor(email, 'Please, enter your email');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'If you dont put a real email address, you will have more chances to send me your message with a carrier pigeon.');
} else {
setSuccessFor(email);
}


}


function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}

function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}

function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}



Puis le message d'alerte :

const message =
  "Thank you for submitting your request. We will respond shortly. Or not...";
 
document
  .getElementById("form")
  .addEventListener("submit", function (event) {
    event.preventDefault();
    alert(message);
  });



Mais quand je fusionne les deux, ça bug. L'alerte ne s'affiche pas ou l'alerte boucle. Voici mon code complet :

const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
 
form.addEventListener("submit", (e) => {
  e.preventDefault();
 
  checkInputs();
});
 
function checkInputs(){
  // trim to remove the whitespaces
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
 
  if (usernameValue === "") {
    setErrorFor(username, "Please, enter your username.");
  } else {
    setSuccessFor(username);
  }
 
  if (emailValue === "") {
    setErrorFor(email, "Please, enter your email");
  } else if (!isEmail(emailValue)) {
    setErrorFor(
      email,
      "If you dont put a real email address, you will have more chances to send me your message with a carrier pigeon."
    );
  } else {
    setSuccessFor(email);
  }
}
 
function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector("small");
  formControl.className = "form-control error";
  small.innerText = message;
}
 
function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = "form-control success";
  const message =
    "Thank you for submitting your request. We will respond shortly. Or not...";
 
  document.getElementById("form").addEventListener("submit", function (event) {
    event.preventDefault();
    alert(message);
  });
}
 
function isEmail(email) {
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
    email
  );
}


Ça serait incroyable si vous pouviez m'aider....
Merci à vous et bonne journée :)
A voir également: