Discussion :

[FRED.G]

Bonjour,

Je ne suis pas un expert du dev web, donc j'ai choisi d'utiliser un template boostrap pour créer une page de contact pour un site web. Mon modèle est visible ici.

Lorsque l'utilisateur essaie de valider le formulaire et que des champs sont invalides, un message d'erreur est affiché.

J'aimerais pouvoir définir la couleur de la police du message d'erreur et de l'étiquette du champ et aussi faire apparaitre/disparaitre une bordure pour le champ en erreur.
Par exemple exactement comme pour le champ Email address de cette démo.

Je ne sais pas s'il faut ajouter un attribut directement en html dans la balise <input> ou <textarea> concernée, ou s'il faut modifier un fichier css ou utiliser Javascript.

Quelqu'un peut-il me guider?

Merci d'avance !

[NoSmoking]

Bonjour,
si on s'en référe à la construction des messages, il se trouve dans une structure du type

Code html :

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

1
2
3
<ul role="alert">
    <li>Please enter your email address.</li>
</ul>

il te suffit donc à priori d'ajouter le CSS suivant par exemple

Code :

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

1
2
3
4
[role=alert] {
  color: red;
  font-weight: bold;
}

[FRED.G]

Bonjour,

merci pour la réponse. Cela fonctionne pour le texte du message d'erreur.

Avant de taguer résolu j'aimerais trouver une solution pour la mise en forme des champs invalides et de leurs étiquettes. Je suppose que je dois trouver ou insérer un attribut équivalent à role="alert".
Si je dois l'insérer, dois-je le faire en javascript dans le fichier jqBootstrapValidation.js ?

[FRED.G]

Ok, donc inutile de modifer le fichier jqBootstrapValidation.js car la class .has-error est automatiquement insérée.

Donc ensuite pour la mise en forme je suis ton exemple :

Code :

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

1
2
3
4
5
/* Invalid form CSS
-------------------------------------------------- */
.has-error label{
	color: red;
}