Formulaire HTML5, attribut « required » et message d'alerte

Bonjour à tous,

Sous ce titre un peu long vient se poser un problème que je rencontre sur un formulaire destiné à un usage mobile.

Il s'agit d'un formulaire de connexion avec deux champs : identifiant et mot de passe. Les deux champs ont un attribut « required ».

Le problème rencontré est le suivant : lorsque l'identifiant est mal saisi ou manquant et que le formulaire est validé, un message d'alerte se positionne sur le champ en question.

Sauf que ce message vient couvrir la zone de saisie et ne disparait pas lorsque l'on tente de saisir à nouveau son identifiant. Je rencontre le problème à la fois via un mobile, mais aussi sur un navigateur classique.

Ma question : existe t-il un moyen de déplacer ce message d'alerte ? ou de faire en sorte qu'il disparaisse une fois que l'utilisateur souhaite saisir à nouveau son identifiant ?

Voir l'image associée à ce topic pour mieux visualiser le problème.

Ah, et je ne peux malheureusement pas partager le code source

Merci !



Modifié par Grumble (15 Mar 2012 - 11:07)

a écrit :
Ah, et je ne peux malheureusement pas partager le code source

du code html et css ultra-secret? ce serait ballot en effet…

Pour l'instant les info-bulles c'est propriétaire au navigateur. Peut-être existe-t-il un workaround pour éviter cet effet. Sinon du bon vieux javascript et validation à l'ancienne?

Hello.

Grumble a écrit :
Ah, et je ne peux malheureusement pas partager le code source

Tu peux toujours faire un jsFiddle ou un Dablblet reproduisant le problème.

Merci pour vos réponses.

C'est vrai que bon, rien ne m'empêche de partager le code, très classique des deux champs en questions :

<input type="tel" id="txt_DemandeIdentifiant" class="inputconnexion" maxlength="10" placeholder="Mon identifiant" required="required" data-message="Veuillez renseigner votre login" pattern="[0-9]{10}" />

<input type="password" class="inputconnexion" id="txt_DemandeMotDePasse" value="" placeholder="Mon mot de passe" required="required" data-message="Veuillez renseigner votre mot de passe" />

Le souci du message qui ne disparait pas lorsque l'on saisit à nouveau son identifiant, je l'ai entre temps trouvé sur l'attribut

pattern="[0-9]{10}"

. Car dans le champ du mot de passe, le message d'alerte disparait automatiquement dès qu'on repositionne le curseur sur le champ de saisie, alors que l'identifiant attend de trouver 10 caractères pour faire disparaitre le message.

Donc de ce côté là, j'imagine qu'il n'y a pas grand chose à faire puisqu'on souhaite vraiment forcer la saisie de dix chiffres.

Apparemment c'est un bricolage maison avec du javascript et un attribut data-message, faut voir comment est géré l'infobulle dans les css et le code js.

Edit : je confirme que Safari Mobile ne gère toujours pas l'attribut required.
Modifié par Patidou (15 Mar 2012 - 13:20)