web-dev-qa-db-fra.com

Pourquoi Chrome affiche une info-bulle "Veuillez remplir ce champ" dans les champs vides?

J'ai été contacté par mon client disant que les utilisateurs se plaignaient en disant que certains champs affichent désormais une info-bulle avec un message "Veuillez remplir ce champ". Je ne pouvais pas croire ce que j'ai entendu ... mais le client a raison - en utilisant la dernière version Chrome certains champs affichent une info-bulle de navigateur avec ce message même côte à côte avec mes validateurs!

Quel est le problème? Qu'est-ce que je rate?

Merci.

MODIFIER:

Le code HTML généré par mon contrôle utilisateur est le suivant:

<input name="tbMontante" type="text" maxlength="8" size="10" tbMontante" class="Montantetextfield" 
    FieldName="Montante" 
    Required="True" 
    AllowDecimalValues="True" 
/>

MODIFIER:

Mon doctype est le suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Mon navigateur doit-il utiliser HTML 5 pour l'analyser?

html5google-chromepopup
53
TiagoDias

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Vous pouvez désactiver la validation dans le formulaire.

36
TiagoDias

Utilisez-vous l'attribut HTML5 requis ?

Cela entraînera Chrome 10 pour afficher un ballon invitant l'utilisateur à remplir le champ.

47
Brandon

Mettez novalidate="novalidate" sur <form> tag.

<form novalidate="novalidate">
...
</form>

En XHTML, la minimisation des attributs est interdite et l'attribut novalidate doit être défini comme <form novalidate="novalidate">.

http://www.w3schools.com/tags/att_form_novalidate.asp

27
Fred K

Pour arrêter ce popup/ballon Html5 dans le navigateur du kit Web, utilisez le CSS suivant

::-webkit-validation-bubble-message { display: none; }
13
Towhid

Comme je l'ai mentionné dans votre autre question :

Le problème lié à ce fait, que vous avez inventé vos propres attributs non standard (ce que vous n'auriez pas dû faire en premier lieu), et que de nouveaux attributs standardisés (ou des attributs en cours de standardisation) entrent en collision avec eux .

La solution appropriée consiste à supprimer complètement vos attributs inventés et à les remplacer par quelque chose de sensé, par exemple des classes (class="Montantetextfield fieldname-Montante required allow-decimal-values"), ou stockez-les en JavaScript:

var validationData = {
  "Montante": {fieldname: "Montante", required: true, allowDecimalValues: true}
}

Si la solution appropriée n'est pas viable, vous devrez les renommer. Dans ce cas, vous devez utiliser le préfixe data-... parce que cela est réservé par HTML5 à de telles fins, et il est moins susceptible d'entrer en collision avec quelque chose - mais cela pourrait quand même, alors vous devriez sérieusement envisager la première solution - même si c'est plus de travail à changer.

8
RoToRa

Vous devez ajouter l'attribut "formnovalidate" au contrôle qui déclenche la validation du navigateur, par exemple:

<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
4
Flo

Si vous avez un formulaire html contenant un ou plusieurs champs avec des attributs "requis", Chrome (sur les dernières versions) validera ces champs avant de soumettre le formulaire et, s'ils ne sont pas remplis, quelques info-bulles sera montré aux utilisateurs pour les aider à envoyer le formulaire (c'est-à-dire "veuillez remplir ce champ").

Pour éviter cette validation intégrée du navigateur dans les formulaires, vous pouvez utiliser l'attribut "novalidate" sur votre balise de formulaire. Ce formulaire ne sera pas validé par le navigateur:

<form id="form-id" novalidate>

    <input id="input-id" type="text" required>

    <input id="submit-button" type="submit">

</form>
4
chimos

Dans Chrome (v.56 est ce que j'utilise mais je AFAIK cela s'applique généralement), vous pouvez définir title = "" (un seul espace) et le texte du titre automatique sera remplacé et rien (Si vous essayez de ne faire qu’une chaîne vide, il la traitera comme si elle n’était pas définie et ajoutera le texte d’info-bulle automatique que vous avez obtenu).

Je n'ai pas testé cela dans d'autres navigateurs, car je l'ai trouvé en créant une extension Google Chrome. Je suis sûr qu'une fois que je porterai des choses sur d'autres navigateurs, cependant, je verrai si cela travaille en eux (si nécessaire), aussi.

3
Rex Dexter

Hé, nous venons de faire une recherche-remplacement globale, en changeant Requis = " en jRequired =". Ensuite, vous le modifiez également dans le code jquery (jquery_helper.js -> Function ValidateControls). Maintenant, notre validation continue comme avant et Chrome nous laisse seuls! :)

1
tomlemes