Validation d'e-mail HTML5

Question

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 URL valide"

Comment puis-je valider l'e-mail après que l'utilisateur ait saisi? et sans JS comment afficher un message si l'utilisateur entre une forme erronée de son adresse e-mail.

Answer 1

Résumé : La seule méthode 100% correcte est de simplement vérifier la présence du signe @ quelque part dans l'adresse e-mail entrée, puis d'envoyer un message de validation à l'adresse e-mail donnée. Si l'utilisateur final peut suivre les instructions de validation dans ce message électronique, l'adresse e-mail entrée est correcte.

Réponse détaillée :

David Gilbertson en a écrit il y a quelques années :

Il y a deux questions que nous devons poser :

1. L'utilisateur a-t-il compris qu'il devait taper une adresse e-mail dans ce champ ?
2. L'utilisateur a-t-il correctement tapé sa propre adresse e-mail dans ce champ ?

Si vous avez un formulaire bien conçu avec une étiquette indiquant "e-mail", et que l'utilisateur entre un symbole '@' quelque part, alors on peut dire en toute sécurité qu'il a compris qu'il devait saisir une adresse e-mail. Facile.

Ensuite, nous voulons effectuer une validation pour déterminer s'ils ont correctement saisi leur adresse e-mail.

Impossible.

[...]

Toute erreur de frappe entraînera inévitablement une adresse e-mail incorrecte, mais seulement peut-être une adresse e-mail non valide.

[...]

Il n'y a aucun intérêt à essayer de déterminer si une adresse e-mail est 'valide'. Il est bien plus probable qu'un utilisateur entre une adresse e-mail incorrecte et valide plutôt qu'une incorrecte.

En d'autres termes, il est important de remarquer que toute validation basée sur une chaîne de caractères ne peut vérifier que la syntaxe est invalide. Elle ne peut pas vérifier si l'utilisateur peut véritablement recevoir l'e-mail (par exemple, parce que l'utilisateur a déjà perdu ses identifiants, a tapé l'adresse de quelqu'un d'autre ou a accidentellement tapé l'adresse e-mail professionnelle au lieu de son adresse e-mail personnelle pour le cas d'utilisation donné). Souvent, la véritable question à laquelle vous voulez répondre est "cette adresse e-mail est-elle syntaxiquement valide" plutôt que "puis-je communiquer avec l'utilisateur en utilisant cette adresse e-mail donnée" ? Si vous validez la chaîne plus que "contient-elle @", vous essayez de répondre à la première question. Personnellement, je suis toujours intéressé par la seconde question uniquement, à savoir si le destinataire peut effectivement lire le message ?

Par exemple, si je tape accidentellement mikok.rantalainen@gmail.com comme mon adresse e-mail, pensez-vous que vous pouvez vraiment valider cette chaîne sans essayer de m'envoyer un message électronique ? C'est évidemment une adresse e-mail syntactiquement valide mais je ne peux pas lire de message envoyé à cette adresse. Était-ce le type d'adresse e-mail que vous essayiez en réalité de collecter ?

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

Answer 2

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

De plus, en utilisant du JS, vous pouvez ajouter dynamiquement la validation à tous les champs de saisie de type email sur votre site au lieu de devoir modifier chaque champ individuellement.

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Veuillez saisir une adresse e-mail valide']
};
$(document).ready(function(){
    // Vérifier tous les champs de saisie de type email. Cette fonction gérera toutes les validations d'adresse e-mail
    $("input[type=email]").change( function(){
        // Définir l'expression régulière pour valider l'e-mail 
        validation = new RegExp(validations['email'][0]);
        // Valider la valeur de l'e-mail par rapport à l'expression régulière
        if (!validation.test(this.value)){
            // Si la validation échoue, nous affichons le message d'erreur personnalisé
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // C'est vraiment important. Si la validation est réussie, vous devez réinitialiser le message d'erreur personnalisé
            this.setCustomValidity('');
        }
    });
})

Answer 3

Voici l'exemple que j'utilise pour toutes mes entrées d'e-mail de formulaire. Cet exemple est en ASP.NET, mais s'applique à tout :

HTML5 continue de valider en utilisant le motif même lorsque ce n'est pas nécessaire. Je n'en ai pas encore trouvé un qui soit un faux positif.

Cela se rend comme suit en HTML :

Answer 4

Vous pouvez suivre ce modèle également

  E-mail: 

Réf : Dans W3Schools

Answer 5

En utilisant HTML 5, il suffit de rendre l'entrée de l'e-mail comme suit :

Lorsque l'utilisateur survole la zone de saisie, un infobulle lui indique d'entrer une adresse e-mail valide. Cependant, les formulaires Bootstrap ont un message d'info-bulle bien meilleur pour indiquer à l'utilisateur d'entrer une adresse e-mail et il apparaît dès que la valeur saisie ne correspond pas à une adresse e-mail valide.