web-dev-qa-db-fra.com

Bootstrap 3 formulaire à l'aide d'étiquettes d'erreur d'enveloppement de groupe d'entrée-addon avec Jquery Validate

Utilisation de Bootstrap 3 avec un formulaire horizontal utilisant des balises form-group et input-group avec Jquery-Validate. Lorsque Jquery.Validate s'exécute pour les erreurs, il ajoute un contrôle d'erreur d'étiquette dans le groupe d'entrée .

Le problème est que le module d'entrée-groupe s'ajoute à la ligne suivante sous le champ de formulaire lorsque le contrôle d'erreur d'étiquette est ajouté par Jquery Validate. Jquery Validate error wrapping input-group-addon

VUE: http://www.bootply.com/114554

Comment puis-je obtenir l'erreur d'étiquette pour rester sous le contrôle de formulaire et pas encapsuler l'addon de groupe d'entrée à la ligne suivante?

Oui, je suis au courant de cette solution - fonctionne très bien, mais n'aligne toujours pas le libellé d'erreur pour form-horizontal: Bootstrap 3 avec jQuery Validation Plugin

jqueryjquery-validatetwitter-bootstrap-3
24
bandrzej

Résolu d'une autre manière: http://www.bootply.com/2liEuyqrAb

J'ai dû déplacer l'étiquette en dehors du groupe d'entrée. Une fois cela fait, a fait le comportement attendu: étiquette de formulaire à gauche, champ à droite et erreur sous le champ.

5
bandrzej

Le moyen le plus simple de résoudre votre problème devrait être de mettre votre étiquette d'erreur avec la propriété de position absolue dans css. Dans votre exemple, voici le résultat:

.text-danger {
    color: #a94442;
    position: absolute;
    width: 100%;
    top: 34px;
    line-height: 34px;
    left: 0px;


}
5
hillock

Je donne une solution à cette question pour un autre utilisateur, c'est le même problème.

Vous pouvez le trouver ici. Bootstrap-3: ERETCHES de groupe de modules d'entrée avec messages de validation jQuery.

2
LXhelili