J'ai un formulaire simple avec un champ de saisie d'e-mail. Je voudrais obtenir une erreur sous le champ lorsque l'entrée de l'e-mail est laissée vide, ce que mon code fait déjà. Cependant, je souhaite qu'un message apparaisse sous le champ de saisie si l'email n'est pas validé. Actuellement, je ne peux recevoir que le message d'erreur (l'e-mail n'est pas valide) à tout moment. Donc, fondamentalement, un utilisateur laisse l'entrée vide et reçoit un message d'erreur (vous devez taper un e-mail), ou ne fournit pas d'e-mail valide, puis reçoit un autre message d'erreur.

const email = document.querySelector('.email');
const form = document.querySelector('.form');
const emailMessage = document.querySelector('.empty-email-message');
const errorEmail = document.querySelector('.invalid-email-message');

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    // setTimeout(() => {
    //   emailMessage.style.display = 'none';
    // }, 1000);
    emailMessage.innerHTML = 'You must type in an email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) {
  errorEmail.value = '';
} else {
  errorEmail.value = 'email is invalid';
}
 <form class="form" id="form" action="submit">
    <input class="email" type="email" />
    <button class="submit-email" type="submit">Go</button>
    <!-- dont use id -->
    <p class="empty-email-message"></p>
    <p class="invalid-email-message"></p>
</form>
0
Hesam Alavi 18 févr. 2020 à 05:00

1 réponse

Meilleure réponse

Vous avez mentionné la condition en dehors de la portée de la fonction, alors faites-la à l'intérieur et vérifiez d'abord si l'e-mail a de la valeur,

S'il a une valeur, vérifiez regex match.

Si la correspondance regex ne correspond pas à l'entrée fournie, affichez le message d'erreur, errorEmail.textContent = 'email is invalid'; et assurez-vous que vous faites le message d'erreur vide à '' chaîne vide..

Si vous souhaitez effectuer la validation sur saisie utilisateur, vous pouvez alors suivre cette approche https://codepen.io /Maniraj_Murugan/pen/WNvxQPq

Remarque:

À moins que vous ne remplaciez un élément HTML, n'utilisez pas innerHTML, utilisez plutôt textContent si vous ne remplacez que du texte.

const email = document.querySelector('.email');
const form = document.querySelector('.form');
const emailMessage = document.querySelector('.empty-email-message');
const errorEmail = document.querySelector('.invalid-email-message');

form.addEventListener('submit', e => {
    if(email.value){
    const regexMatch = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value);
    if (regexMatch) {
          errorEmail.textContent = '';
        } else {
          e.preventDefault();
          errorEmail.textContent = 'email is invalid';
          emailMessage.textContent = "";
        }
    } else {
      e.preventDefault();
      emailMessage.textContent = 'You must type in an email';
      errorEmail.textContent = "";
    }
});
<form class="form" id="form" action="submit">
    <input class="email" type="email" />
    <button class="submit-email" type="submit">Go</button>
    <!-- dont use id -->
    <p class="empty-email-message"></p>
    <p class="invalid-email-message"></p>
 </form>
1
Maniraj Murugan 18 févr. 2020 à 04:32