Bonsoir à tous.
Je me suis lancé dans l'apprentissage du langage il y a à peine 1 mois. Je travaille sur un formulaire dont naturellement je vérifie d'abord la validité des données saisies avec ma fonction chekInputs(). Je voudrais ensuite faire une redirection si et seulement si je n'ai d'erreur nulle part.
Ce qui voudra dire que la redirection ne serait possible que si la fonction setErrorFor() que j'ai plusieurs fois sollicité dans mon chekInputs(), n'est pas exécuté au cours de la validation.
Donc je me demande s'il existerait une fonction qui me permettrait de compter le nombre de fois où une quelconque fonction a été exécuté lors d'un traitement.
Pour l'instant je suis toujours redirigé même en cas d'erreur au niveau d'un champ. Ce qui n'est pas étonnant vu que ma fonction redirect() s'exécute sans condition pour le moment.
J'ai mis le code en dessous
J'espère avoir été assez clair. J'attends impatiemment vos interventions. Merci à tous !

Code:

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

form.addEventListener('submit', e => {
 e.preventDefault();
 //1- Vérification des champs
 checkInputs();
    //2- Redirection sans condition pour l'instant
    redirect()
});

function checkInputs(){
 //corps
 const usernameValue = username.value.trim();
 const emailValue = email.value.trim();
 const passwordValue = password.value.trim();
 const password2Value = password2.value.trim();

 if(usernameValue === '') {
  setErrorFor(username, 'Username cannot be blank');
 } else {
  setSuccessFor(username);
 }

 if(emailValue === '') {
  setErrorFor(email, 'Email cannot be blank');
 } else if (!isEmail(emailValue)) {
  setErrorFor(email, 'Not a valid email');
 } else {
  setSuccessFor(email);
 }

 if(passwordValue === '') {
  setErrorFor(password, 'Password cannot be blank');
 } else {
  setSuccessFor(password);
 }

 if(password2Value === '') {
  setErrorFor(password2, 'Password2 cannot be blank');
 } else if(passwordValue !== password2Value) {
  setErrorFor(password2, 'Passwords does not match');
 } else{
  setSuccessFor(password2);
 }
}

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

function redirect()
{
window.location.href='test.php'; 
}

2 réponses


Curvata
Réponse acceptée

Bonsoir,

tu pourrais simplement te créer une variable let error = false; que tu passes à true dans ta fonction setErrorFor() et ensuite tu fais ton if (!error)

Merci de formater ton code pour faciliter la lecture.

Xbet Mig
Auteur

Merci Curvata !