Rejeter les emails non pro

Empêcher la soumission d'un formulaire si l'adresse mail n'est pas issue d'un domaine personnalisé

Language: Javascript

Catégorie : Formulaire

<script>

document.addEventListener('DOMContentLoaded', function () {
  const invalidDomains = [
    'gmail.com',
    'yahoo.com',
    'hotmail.com',
    'live.net',
    'orange.fr',
    'sfr.fr',
    'yopmail.com',
  ];

  const submitBtn = document.querySelector('[js-form-reject="submit"]');

  submitBtn.addEventListener('click', function (event) {
    const email = document.querySelector('[js-form-reject="email"]');

    const domainPart = email.value.split('@')[1];

    if (invalidDomains.includes(domainPart)) {
      email.value = '';

      email.setAttribute('placeholder', "Merci d'utiliser une adresse professionnelle");

      email.style.border = '1px solid red';

      event.preventDefault();
    } else {
      email.style.border = '';
    }
  });
});

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Reject Non Pros -->
<script src="https://cdn.jsdelivr.net/npm/@justaa/scripts/dist/forms/reject-non-pros.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function () {
  const invalidDomains = [
    'gmail.com',
    'yahoo.com',
    'hotmail.com',
    'live.net',
    'orange.fr',
    'sfr.fr',
    'yopmail.com',
  ];

  const submitBtn = document.querySelector('[js-form-reject="submit"]');

  submitBtn.addEventListener('click', function (event) {
    const email = document.querySelector('[js-form-reject="email"]');

    const domainPart = email.value.split('@')[1];

    if (invalidDomains.includes(domainPart)) {
      email.value = '';

      email.setAttribute('placeholder', "Merci d'utiliser une adresse professionnelle");

      email.style.border = '1px solid red';

      event.preventDefault();
    } else {
      email.style.border = '';
    }
  });
});

</script>

Les attributes

Form Submit Button - Identifier l'élément de soumission du formulaire

Nom

js-form-reject

Valeur

submit

Ajouter l'attribute au bouton de soumission du formulaire

Input - Identifier l'input de type Email

Nom

js-form-reject

Valeur

Ajouter l'attribute au champ email du formulaire

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du script

<script>

document.addEventListener('DOMContentLoaded', function () {
  const invalidDomains = [
    'gmail.com',
    'yahoo.com',
    'hotmail.com',
    'live.net',
    'orange.fr',
    'sfr.fr',
    'yopmail.com',
  ];

  const submitBtn = document.querySelector('[js-form-reject="submit"]');

  submitBtn.addEventListener('click', function (event) {
    const email = document.querySelector('[js-form-reject="email"]');

    const domainPart = email.value.split('@')[1];

    if (invalidDomains.includes(domainPart)) {
      email.value = '';

      email.setAttribute('placeholder', "Merci d'utiliser une adresse professionnelle");

      email.style.border = '1px solid red';

      event.preventDefault();
    } else {
      email.style.border = '';
    }
  });
});

</script>