Validation des e-mails HTML5

Il est dit "Avec HTML5, nous n'avons plus besoin de js ou de code côté serveur pour vérifier si l'entrée de l'utilisateur est une adresse e-mail ou une URL valide"

Comment puis-je valider l'e-mail après l'entrée d'un utilisateur? et sans JS comment afficher un message si l'utilisateur saisit une mauvaise forme de son adresse e-mail.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

En HTML5, vous pouvez faire comme ceci:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

Et lorsque l'utilisateur appuie sur Soumettre, il affiche automatiquement un message d'erreur comme:

La input type=emailpage du site www.w3.org note qu'une adresse e-mail est toute chaîne qui correspond à l'expression régulière suivante:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Utilisez l' requiredattribut et un patternattribut pour exiger que la valeur corresponde au modèle d'expression régulière.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

Utilisation [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}pour [email protected]/[email protected]

document.getElementById("email").validity.valid

semble être vrai lorsque le champ est vide ou valide. Cela a également d'autres drapeaux intéressants:

Testé dans Chrome.

Voici l'exemple que j'utilise pour toutes mes entrées de courrier électronique. Cet exemple est ASP.NET, mais s'applique à tout:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: [email protected])" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 valide toujours l'utilisation du modèle lorsqu'il n'est pas nécessaire. Je n'en ai pas encore trouvé un qui était un faux positif.

Cela se traduit par le HTML suivant:

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: [email protected])" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

Je sais que vous n'êtes pas après la solution Javascript, mais il y a certaines choses telles que le message de validation personnalisé qui, d'après mon expérience, ne peut être fait qu'en utilisant JS.

En outre, en utilisant JS, vous pouvez ajouter dynamiquement la validation à tous les champs de saisie de type e-mail de votre site au lieu d'avoir à modifier chaque champ de saisie.

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

Un peu en retard pour la fête, mais cette expression régulière m'a aidé à valider l'entrée de type d'e-mail côté client. Cependant, nous devrions toujours faire la vérification côté serveur également.

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

Vous pouvez trouver plus de regex de toutes sortes ici .

TL; DR: La seule méthode correcte à 100% est de vérifier @ -sign quelque part dans l'adresse e-mail saisie, puis de publier un message de validation à l'adresse e-mail donnée. S'ils peuvent suivre les instructions de validation dans l'e-mail , l'adresse e-mail saisie est correcte.

Longue réponse:

David Gilbertson a écrit à ce sujet il y a des années:

Nous devons nous poser deux questions:

1. L'utilisateur a-t-il compris qu'il était censé saisir une adresse e-mail dans ce champ?
2. L'utilisateur a-t-il correctement saisi sa propre adresse e-mail dans ce champ?

Si vous avez un formulaire bien présenté avec une étiquette qui dit «e-mail» et que l'utilisateur entre un symbole «@» quelque part, alors il est sûr de dire qu'il a compris qu'il était censé entrer une adresse e-mail. Facile.

Ensuite, nous voulons faire une validation pour vérifier s'ils ont correctement saisi leur adresse e-mail.

Pas possible.

[...]

Toute erreur de saisie entraînera certainement une adresse e-mail incorrecte , mais peut- être seulement une adresse e-mail invalide .

[...]

Il ne sert à rien d'essayer de déterminer si une adresse e-mail est «valide». Un utilisateur est beaucoup plus susceptible de saisir une adresse e-mail incorrecte et valide que de saisir une adresse non valide .

En d'autres termes, il est important de noter que tout type de validation basée sur une chaîne ne peut vérifier que si la syntaxe n'est pas valide. Il ne peut pas vérifier si l'utilisateur peut réellement voir l'e-mail (par exemple parce que l'utilisateur a déjà perdu les informations d'identification, l'adresse tapée de quelqu'un d'autre ou un e-mail professionnel tapé au lieu de l'adresse e-mail personnelle pour un cas d'utilisation donné). À quelle fréquence la question que vous recherchez est " Cet e-mail est-il syntaxiquement valide " au lieu de " Puis-je communiquer avec l'utilisateur en utilisant une adresse e-mail donnée "? Si vous validez la chaîne plus que "contient-elle @", vous essayez de répondre à l'ancienne question! Personnellement, je ne suis toujours intéressé que par cette dernière question.

De plus, certaines adresses e-mail qui peuvent être syntaxiquement ou politiquement invalides fonctionnent. Par exemple, postmaster@aifonctionne techniquement même si les TLD ne doivent pas avoir d'enregistrements MX . Voir également la discussion sur la validation des e-mails sur la liste de diffusion WHATWG (où HTML5 est conçu en premier lieu).

En utilisant HTML 5, créez simplement l'e-mail d'entrée comme:

<input type="email"/>

Lorsque l'utilisateur survole la zone de saisie, une info-bulle lui demande de saisir un e-mail valide. Cependant, les formulaires Bootstrap ont un bien meilleur message d'info-bulle pour indiquer à l'utilisateur de saisir une adresse e-mail et il apparaît au moment où la valeur saisie ne correspond pas à un e-mail valide.

Vous pouvez également suivre ce modèle

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Réf: Dans W3Schools

Selon MDN , ce RegExp permet de valider les e-mails, car les e-mails qui répondent aux spécifications doivent y correspondre.

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Il est très difficile de valider correctement les e-mails en utilisant simplement l'attribut HTML5 «modèle». Si vous n'utilisez pas de "modèle", quelqu'un @ sera traité. qui n'est PAS un e-mail valide.

L'utilisation pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"nécessitera que le format soit [email protected]cependant si l'expéditeur a un format comme [email protected](ou similaire) ne sera pas validé pour résoudre ce problème, vous pourriez mettre pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"cela validera ".com.au ou .net.au ou similaire.

Cependant, en utilisant cela, cela ne permettra pas à quelqu'[email protected] de valider. Donc, la simple utilisation de HTML5 pour valider les adresses e-mail n'est toujours pas totalement avec nous. Pour compléter cela, vous utiliseriez quelque chose comme ceci:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

ou:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

Cependant, je ne sais pas comment valider les deux ou toutes les versions d'adresses e-mail à l'aide de l'attribut de modèle HTML5.