web-dev-qa-db-fra.com

type d'entrée = "email"

J'ai un formulaire où je demande des adresses e-mail. D'habitude j'utiliserais

<input type="email" ...>

mais je veux permettre à un utilisateur de taper foo plutôt que [email protected] dans le cas (probable) où ils utilisent une adresse électronique @mycompany.com. Existe-t-il un moyen de contourner la validation (si le format correspond à cette expression rationnelle, acceptez; sinon validez normalement), ou devrais-je simplement utiliser

<input type="text" ...>

et ignorer la sémantique et ainsi de suite?

1
Charles

Si vous souhaitez autoriser du contenu qui ne se trouve pas dans un adresse électronique valide t, vous souhaiterez utiliser <input type="text" ...> comme vous l'avez dit. Bien que quelqu'un puisse entrer une adresse électronique complète, il n'est pas exclusif à ce champ. Par conséquent, l'utilisation de <input type="email" ...> ne serait pas appropriée.

Vous pouvez également désactiver la validation du formulaire si vous ne souhaitez pas que le navigateur valide ces champs pour vous. Mais ce genre de chose va à l’encontre de l’utilisation des fonctionnalités HTML5.

5
John Conde

HTML5 permet à l'attribut pattern="" d'être spécifié :

Spécifie une expression régulière par rapport à laquelle un agent utilisateur est censé vérifier la valeur du contrôle représenté par son élément.

Expression régulière qui doit correspondre à la production de modèles JavaScript spécifiée dans [ECMA 262].

Exemples:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

<input type="email" id="email" name="email" placeholder="Enter your email address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$">

Mais je voudrais utiliser type="text" pour être plus sûr - dans ce cas, vous pouvez valider TOUT entrée utilisateur.

2
LazyOne

Vous pouvez utiliser le nouvel attribut HTML5 pattern pour spécifier les formats valides d'un champ de saisie à l'aide d'une expression rationnelle JavaScript, puis placez le message d'erreur dans l'attribut title:

<input type="email" pattern="([regexp])" title="Your error message" />

Cependant, dans le scénario que vous décrivez, il n’ya pas beaucoup d’avantage à utiliser cette méthode par rapport à type="text", à part le fait que les utilisateurs de Mobile Safari verront un clavier de messagerie plutôt que le clavier complet qwerty.

En tant que tel, vous pouvez envisager de rendre obligatoire l'utilisation d'une adresse de société, en ajoutant celle-ci en texte brut après le champ de texte et en invitant les utilisateurs à saisir la première partie de l'adresse électronique plutôt que la version complète.

2
Nick