<input type=

Bonjour
Ayant recherché dans ce forum LA BONNE regex pour valider un email, je suis tombé sur un fil récent où l'un des participants proposait simplement de mettre un <input type="email"> au lieu de <input type="text" onchange="..."/>
Je constate le comportement suivant sous FF:
1) Si on met une valeur erronée dans un champ <input type="email"/>, il ne se passe rien sur le moment.
2) Au moment de "submit", le cadre de la balise devient rouge, mais ça n’empêche pas le submit.

En conclusion: ça n'a pas l'air de servir à grand chose.

Est-ce que j'ai manqué quelque chose?

type="mail" ne permet pas de t'assurer que ce soit un email, le seul moyen de vérifier qu'un email est un email est de le contrôler côté serveur via une regex (tu en trouves à la pelle sur le net).

A savoir que même si ton javascript permet de vérifier le mail, il sera toujours possible de passer outre le javascript (javascript désactivé, soumission directe à la page etc.).

Ca affiche un clavier différent sur les téléphones et autres tablettes, donc il est quand même utile de l'utiliser et c'est aussi un bon moyen (parmi d'autres) d’identifier à quoi sert cet input.

Par contre, effectivement, le seul moyen de le vérifier est côté serveur. Tu peux toujours utiliser le JS pour une première validation et afficher une éventuelle erreur à l'utilisateur (c'est toujours une bonne pratique), il existe des bibliothèques pour ça.

Ton comportement est toutefois curieux, quel version de FF as-tu ?
Modifié par MagicCarpet (03 Feb 2015 - 12:45)

MagicCarpet a écrit :

Ton comportement est toutefois curieux, quel version de FF as-tu ?

La plus récente: 35.0.1
Pour le reste, je vais bien entendu vérifier la validité de l'adresse email dans le programme php.
Le but de le vérifier dans le formulaire est d'alerter l'utilisateur sur d'éventuelles fautes de frappe.

Tu as ce genre de chose pour les "phôtes" et autres erreurs de manips : https://github.com/mailcheck/mailcheck

J'ai poursuivi mon étude du comportement des balises

<input type="email"/>

Il semble bien que le cadre soit mis en rouge quand on quitte le champ de saisie par une tabulation au clavier, mais pas si on clique à la souris pour donner le focus à un autre champ.

Quand on regarde par JS les attributs des éléments DOM correspondant, on trouve que le type "email" a été remplacé par "text".

Le comportement de tab parait plus logique, concernant le click je test ce soir et je te ferais un retour.

Par contre je ne comprends pas ta dernière phrase, avec quel JS tu teste ?

MagicCarpet a écrit :
Le comportement de tab parait plus logique, concernant le click je test ce soir et je te ferais un retour.

Par contre je ne comprends pas ta dernière phrase, avec quel JS tu teste ?

JS = LE Javascript du navigateur.
Je sais que beaucoup de personnes utilisent des sur-couches de JavaScript, mais j'ai déjà assez de mal à m'y retrouver sans en plus me lancer dans jQuery et autres produits du même genre.
Je me suis fait au cours des années ma collection de fonctions et objets que j'ai mise dans un fichier "basics.js" qui est chargé dans toutes mes pages.

Dans le cas présent, j'ai écrit

        function checkAll() {
                var result = true;
                var formElement = $('updateForm');
                var inputFields = formElement.getElementsByTagName('input');
                for(var i = 0; i < inputFields.length; i++) {
                    var field = inputFields[ i], inputID = field.id, inputType = field.type;
                    var res = true;
                    switch(inputType) {
                        case 'email':                // ne se produit pas avec FF
                            res = checkEmail(field);
                            break;
                        case 'phone':                // ne se produit pas avec FF
                            res = checkPhone(field);
                            break;
                        case 'text':
                            var iPhone = inputID.indexOf('phone');
                            var iMail = inputID.indexOf('mail');
                            var iZip = inputID.indexOf('zip');
                                if(iPhone == 0) res = checkPhone(field);  // pour FF
                                if(iMail == 0) res = checkEmail(field);   // pour FF
                                if(iZip == 0) res = checkZip(field);      //test du code postal (/^\d{5}$/)
                            break;
                        default:;                            
                    }
                    result = result || res;
                }
                return result;
            }

Quand j'exécute en pas à pas avec Fib reBug, jevois fieldType varier de hidden à button, mais en qui qui concerne les champs marqués type="email" ou type="phone" il affiche fieldType = "text"

Pour les retrouver, j'ai dû me rabattre sur les id auxquels j'ai donné des noms permettant de s'en sortir, comme on le voit sur cet extrait.

Ce que je ne comprends pas et a priori n'est pas normal c'est que, si j'ai bien compris, dans ton code HTML tu écris type=email mais quand tu le teste avec ton navigateur tu n'as pas email mais text ???

MagicCarpet a écrit :
Ce que je ne comprends pas et a priori n'est pas normal c'est que, si j'ai bien compris, dans ton code HTML tu écris type=email mais quand tu le teste avec ton navigateur tu n'as pas email mais text ???

Exactement pas difficile de tester, tu as le code JS dans le précédent message.

Tu peux héberger la page quelque part ?
Tu peux essayer avec un autre navigateur ?

Je t'ai demandé pour être sur, parce que j'ai ce type d'input sur mon site et j'ai bien type=email.

salut,
les <input> type 'email' vérifient bien que les données entrées correspondent à une adresse email. Les expressions régulières utilisées se basent sur ces spécifications.
C'est toujours assez délicat de trouver LA bonne expression régulière qui filtrera les emails sans jamais ne commettre d'erreurs. Entre les spécifications et la réalité c'est généralement sensiblement différent. Si on prend les principaux sites qui proposent d'avoir une boîte de messagerie, on se rend compte que les caractères autorisés sont assez limités (caractères alphanumériques et les caractères [._-]). Après, il est vrai qu'une adresse email n'est pas forcément reliée à ces principaux site. Maintenant, on peut même avoir des URLs avec des lettres accentuées...
Personnellement je me suis résigné à faire un contrôle très simpliste côté client et ne pas bloquer l'envoi en cas d'erreur détectée. J'affiche un message disant qu'il "semblerait que l'email soit invalide" mais je n'affirme rien.
L'essentiel étant le contrôle côté serveur où on peut pousser les choses avec filter_var et pourquoi même vérifier l'existence du nom de domaine avec un checkdnsrr. Tu pourrais par exemple passer par Ajax pour transmettre l'email saisie et faire une vérification avec un script PHP.

MagicCarpet a écrit :
Tu peux héberger la page quelque part ?
Tu peux essayer avec un autre navigateur ?

Je t'ai demandé pour être sur, parce que j'ai ce type d'input sur mon site et j'ai bien type=email.

Je ferai une page accessible demain.

Bonne nuit
Modifié par PapyJP (04 Feb 2015 - 00:18)

J'avais tort sur toute la ligne.
Ce qui semble se passer, c'est que si FireFox trouve un type inconnu il le remplace par "text".
Mon exemple était faussé parce que j'avais mis type="phone" au lieu de type="tel".
Avec mes excuses pour vous avoir fait perdre du temps.
Par contre je n'ai pas testé se qui se passe quand on met une valeur fausse, il faudrait pou cela que je désactive mes propres vérifs, mais j'ai fait assez d'erreurs pour la journée...
Je verrai demain!

:)

Comme quoi, tout s'explique, bonne nouvelle et bonne continuation.

Remplacer un type inconnu par text est le comportement par défaut, ce n'est pas censé être spécifique à firefox. Voir la spec HTML5 pour les types qui existent vraiment.

Par contre pour que ce soit clair, type=tel ne vérifie pas grand chose, la forme des numéros de téléphone locaux n'étant pas trop standardisée (et même le format international ne l'est pas vraiment il me semble).

Par contre c'est hyper pratique sur les mobiles parce que ça affiche le clavier numérique, je fais une petite entorse à la sémantique et l'utilise quand je demande une entrée numérique même si ce n'est pas un numéro de téléphone (parce que bizarrement, le type number n'affiche pas le clavier numérique, ce qui est complètement débile).

QuentinC a écrit :
Remplacer un type inconnu par text est le comportement par défaut, ce n'est pas censé être spécifique à firefox. Voir la spec HTML5 pour les types qui existent vraiment.

Par contre pour que ce soit clair, type=tel ne vérifie pas grand chose, la forme des numéros de téléphone locaux n'étant pas trop standardisée (et même le format international ne l'est pas vraiment il me semble).

Par contre c'est hyper pratique sur les mobiles parce que ça affiche le clavier numérique, je fais une petite entorse à la sémantique et l'utilise quand je demande une entrée numérique même si ce n'est pas un numéro de téléphone (parce que bizarrement, le type number n'affiche pas le clavier numérique, ce qui est complètement débile).

Merci Quentin
Je n'ai pas encore commencé les tests du jour. J'espère bien que type="tel" ne fait AUCUNE vérification, car effectivement il n'y a aucune norme acceptée. Ma propre vérif consiste à ignorer les espaces, les points et les tirets, et vérifier que le résultat est "0" ou "+33" suivi de neuf chiffres, sachant que je n'ai à saisir que des numéros de téléphone privés ou portables en France.