web-dev-qa-db-fra.com

Validation de la messagerie HTML5

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

Comment valider un email après la saisie d'un utilisateur? et sans JS, comment afficher un message si l'utilisateur entre un mauvais formulaire de son adresse électronique.

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

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 du type:

Error Message

106
Midhun MP

La page input type=email du site www.w3.org indique qu'une adresse électronique est une chaîne quelconque qui correspond à l'expression régulière suivante:

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

Utilisez l'attribut required et un attribut pattern 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
>
28
Stefan Ciprian Hotoleanu

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

12
Van Nguyen

Voici l'exemple que j'utilise pour toutes mes entrées d'e-mail de formulaire. 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 encore l'utilisation du modèle lorsqu'il n'est pas requis. Je n'en ai pas encore trouvé qui était un faux positif. 

Cela rend comme 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-]+)*">
6
Keith H.
document.getElementById("email").validity.valid

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

 enter image description here

Testé en Chrome.

5
Nakilon

Je sais que vous n’êtes pas intéressé par la solution Javascript. Toutefois, certaines choses, telles que le message de validation personnalisé, ne peuvent être effectuées, à mon avis, qu’en utilisant JS.

De plus, en utilisant JS, vous pouvez ajouter de manière dynamique la validation à tous les champs de saisie de type email de votre site au lieu de devoir 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('');
        }
    });
})
4
karic83

Il est très difficile de valider correctement la messagerie en utilisant simplement l'attribut HTML5 "pattern". Si vous n'utilisez pas de "motif", quelqu'un @ sera traité. qui n'est pas un email valide.

Utiliser pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" exigera que le format soit [email protected]; toutefois, si l'expéditeur a un format tel que [email protected] (ou similaire) ne sera pas validé pour résoudre ce problème, vous pouvez indiquer pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" et valider ".com.au ou .net.au ou similaire. 

Cependant, en utilisant cela, cela ne permettra pas à quelqu'[email protected] de valider. Donc, pour autant que simplement utiliser HTML5 pour valider des adresses e-mail n’est pas encore totalement à notre portée. Pour compléter ceci, 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 électroniques à l'aide de l'attribut de modèle HTML5.

1
Keith

Vous pouvez suivre ce modèle aussi

<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>

Ref: Dans W3Schools

1
skpaik

En utilisant HTML 5, il suffit de créer le courrier électronique d'entrée comme suit: 

<input type="email"/>

Lorsque l'utilisateur survole la zone de saisie, il affiche une info-bulle lui demandant de saisir un email valide . Cependant, les formulaires Bootstrap ont un message d'info-bulle beaucoup plus précis pour indiquer à l'utilisateur de saisir une adresse e-mail. la valeur entrée ne correspond pas à un email valide.

0
Fabian Madurai