Style jQuery de Validation avec Select2 4.0 et Bootstrap 3+
J'ai un projet qui utilise Bootstrap 3.3.4, Select2 4.0, et Jquery Validation 1.13.1
J'ai mis le jquery du programme de validation par défaut, le style bootstrap 3 classes comme
$.validator.setDefaults({
errorElement: "span",
errorClass: "help-block",
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass);
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass);
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
Mais ces valeurs par défaut ne sont pas de style select2 les champs de la même... dans l'image ci-dessous, les "métaux" select est un bootstrap de champ, tandis que les "couleurs" select est une select2 champ.
J'ai essayé de chercher d'autres SI , mais toutes ces utiliser la 3.5.xx version de select2
J'ai inclus un jsfiddle de l'exemple sur la photo, je suis à la recherche d'ajustements au programme de validation par défaut ont select2 look uniforme
Select2 a un Bootstrap thème vous pouvez utiliser.
Merci @KevinBrown , j'ai fait de mettre cela en œuvre ainsi que la modification de la jquery valider les valeurs par défaut, fonctionne très bien maintenant
Merci @KevinBrown , j'ai fait de mettre cela en œuvre ainsi que la modification de la jquery valider les valeurs par défaut, fonctionne très bien maintenant
OriginalL'auteur Jay Rizzi | 2015-06-11
Vous devez vous connecter pour publier un commentaire.
Il n'y a pas de formule secrète pour les différentes versions; vous avez juste à comprendre votre situation. Cela signifie que vous devez inspecter le rendu DOM sorte que vous savez quels éléments de la cible et la façon de les cibler.
Je ne prétends pas que le code ci-dessous pour vous; c'est juste un exemple de comment s'attaquer à cette situation.
Écrire CSS qui cible le rendu Select2 élément. Donc, chaque fois que le conteneur parent a la classe
has-error
, le Select2 élément sera considéré comme tel.Pour obtenir le message d'erreur à afficher après la Select2 élément nécessite simplement un autre conditionnelle à l'intérieur de la
errorPlacement
option avec certains jQuery DOM traversée.Et enfin, étant donné que l'interaction avec le Select2 ne pas disposer de tous les événements que le jQuery Valider plugin capture automatiquement, vous devrez écrire un gestionnaire d'événements personnalisés et par programme déclencher la validation.
De travail de DÉMONSTRATION: http://jsfiddle.net/z49mb6wr/1/
pour un autre cas ou version plus récente de ce sera travaux
if (element.hasClass("select2-hidden-accessible")) { error.insertAfter(element.next('span.select2')); }
merveilleux! fonctionne parfaitement
OriginalL'auteur Sparky
Sparky la réponse n'a pas marché pour moi, alors je l'ai modifié pour le ci-dessous:
OriginalL'auteur adamj
Une petite modification à la @Sparky la solution - je ne prends pas de crédit, sauf pour comprendre que
error
etvalid
classes sont utilisées par les plus récentes jquery validate(:P) que sur la date:Maintenant code:
Utiliser les CSS sur
error
classe comme il vous plaira.si vous pouvez inclure un exemple de code HTML pour les radios, il sera plus facile de voir pourquoi ça ne marche pas pour vous.
OriginalL'auteur Fr0zenFyr