Discussion :

[pierrot10]

Bonjour à tous,

Je me prends le chou pour un truc plus au moins banal.
Je fais un formulaire et j'aimerais que les messages d'erreurs s'affiche sour forme de bulle au dessus du champs obligatoire.
Par l'occasion, je cherche une bonne librairie jquery pour le faire.

Ceci étant dit j'ajoute 'requiered'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
[[!+fi.error.firstname]]
<input placeholder="Prénom" id="firstname" data-trigger="focus" name="firstname" type="text" value="[[!+fi.firstname]]" required/>

ce qui me permet, avant l'envoi et quad le champs est vide, d'avoir un bord rouge sur le champs obligatoire.
Aussi, un bulle s'affiche avec le texte
"please fill up this field".

Première, j'aimerais savoir s'il était possible de supprimer cette bulle pour n'avoir que le champs avec un bord rouge?

Contrairement à ce qui précède, j'utilise MODx qui va m'afficher un message approprié selon le champs et la langue (fr ou en).
Ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[[!+fi.error.firstname]]

Affichera le message d'erreur en français ou en anglais, sous cette forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="error">Champs obligatoire</span>

Même si ce n'est plus du HTML, connaitreriez un bonne librairie qui m'afficherait les messages comme ceci:
https://thrilleratplay.github.io/jqu...strap-tooltip/ (je n'ai pas réussi à reproduire l'exemple, ci-dessus)

merci pour vos lumières

[Invité]

Bonjour,

• Validation des données de formulaires
  CSS - :required

Concernant les "bulles", elles sont automatiquement générées par le navigateur (et peuvent être différentes d'un navigateur à l'autre).
La langue d'affichage dépend certainement de celle définie pour le navigateur ou l'ordinateur.
(les bulles qui s'affichent chez moi sont en français)

Je ne sais pas si on peut les masquer, ni même si c'est une bonne idée : puisqu'elles donnent "la bonne info", pourquoi vouloir les supprimer ?

[pierrot10]

J'ai pu supprimé cette bulle de cette manière

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
document.querySelector( "form" )
        .addEventListener( "invalid", function( event ) {
            event.preventDefault();
        }, true );

Concernant la validation html5, j'ai décidé ne pas l'utilisée et d'utiliser les messages d'erreur, généré par le CMS et de traiter les messages ainsi que les bulles après la soumission
Merci