J'essaie d'ajouter une validation à mon formulaire avec le plugin de validation jQuery, mais j'ai un problème où le plugin place les messages d'erreur lorsque j'utilise des groupes d'entrée.
$('form').validate({
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
}
});Mon code: http://jsfiddle.net/hTPY7/4/
twitter-bootstrap
jquery-validate
twitter-bootstrap-3
Miguel Borges
la source
la source
Réponses:
pour une compatibilité totale avec twitter bootstrap 3, je dois remplacer certaines méthodes de plugins:
Voir l'exemple: http://jsfiddle.net/mapb_1990/hTPY7/7/
la source
resetForm()au validateur d'un formulaire n'appelleraunhighlightpas les éléments invalides, ce qui oblige à supprimer lahas-errorclasse à la main lors de la réinitialisation d'un formulaire. Ce que je fais est d'appeler la fonction suivante au lieu d'appelerresetForm()directement le validateur :function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }Pour une compatibilité totale avec Bootstrap 3, j'ai ajouté la prise en charge du groupe d' entrée , de la radio et de la case à cocher , qui manquait dans les autres solutions.
Mise à jour 20/10/2017 : Suggestions inspectées des autres réponses et prise en charge supplémentaire du balisage spécial de la radio en ligne , meilleur placement des erreurs pour un groupe de radios ou de cases à cocher et prise en charge d'une classe .novalidation personnalisée pour empêcher la validation des contrôles. J'espère que cela aide et merci pour les suggestions.
Après avoir inclus le plugin de validation, ajoutez l'appel suivant:
Cela fonctionne pour toutes les classes de formulaire Bootstrap 3. Si vous utilisez un formulaire horizontal, vous devez utiliser le balisage suivant. Cela garantit que le texte du bloc d'aide respecte les états de validation ("has-error", ...) du groupe de formulaires .
la source
errorClass: "help-block error-help-block". J'utilisais déjà .help-block pour les informations d'aide régulières, et cela l'écrasait avec des messages de validation de formulaire. L'ajout d'une deuxième classe l'a rendu unique et donc maintenant il ajoute plutôt qu'il n'écrase mon "vrai" message d'aide.J'utilise des formulaires conçus uniquement avec Twitter Bootstrap 3. Je définis des fonctions par défaut pour validor et n'exécute que la méthode de validation avec des règles. J'utilise des icônes de FontAweSome, mais vous pouvez utiliser Glyphicons comme dans l'exemple doc.
Terminé. Après avoir exécuté la fonction de validation:
Exemple JSFiddle
la source
En ajoutant à la réponse de Miguel Borges ci-dessus, vous pouvez donner à l'utilisateur ce retour de réussite vert en ajoutant la ligne suivante dans le bloc de code de mise en surbrillance / désactivation.
la source
c'est la solution dont vous avez besoin, vous pouvez utiliser la
errorPlacementméthode pour remplacer où placer le message d'erreurça marche pour moi comme par magie. À votre santé
la source
error.insertAfter('.form-group');mettre des erreurs dans tous les .form-group. mais cela m'a montré l'idée. mercipour bootstrap 4 ce travail avec moi bien
j'espère que cela aidera!
la source
validClass: 'valid-feedback'Voici ce que j'utilise lors de l'ajout de la validation au formulaire:
Cela a fonctionné pour moi pour le style Bootstrap 3 lors de l'utilisation de la bibliothèque de validation jquery.
la source
J'ai utilisé ceci pour la radio:
de cette façon, l'erreur est affichée sous la dernière option radio.
la source
Je sais que cette question concerne Bootstrap 3, mais comme certaines questions liées à Bootstrap 4 sont redirigées vers celle-ci en tant que doublons, voici l'extrait de code compatible avec Bootstrap 4:
Les quelques différences sont:
has-dangerau lieu dehas-errorla source
.has-*classes. getbootstrap.com/docs/4.3/migration/#forms-1Pour la version bêta de bootstrap 4, il y a eu de gros changements entre les versions alpha et bêta de bootstrap (et aussi bootstrap 3), esp. en ce qui concerne la validation du formulaire.
Tout d'abord, pour placer les icônes correctement, vous devrez ajouter un style qui équivaut à ce qui était dans bootstrap 3 et non plus dans bootstrap 4 beta ... voici ce que j'utilise
Les classes ont également changé car la version bêta utilise «l'état» du contrôle plutôt que des classes que votre code publié ne reflète pas, de sorte que votre code ci-dessus peut ne pas fonctionner. Quoi qu'il en soit, vous devrez ajouter la classe `` a été validée '' au formulaire dans les rappels de réussite ou de mise en surbrillance / désélection.
Je recommanderais également d'utiliser le nouvel élément et les nouvelles classes pour le texte d'aide du contrôle de formulaire
la source
Cela compose les champs
la source
ajouter un correctif radio en ligne à ce https://stackoverflow.com/a/18754780/966181
la source
La réponse de DARK_DIESEL a très bien fonctionné pour moi; voici le code pour tous ceux qui veulent l'équivalent en utilisant des glyphicons:
la source
Essayez d'utiliser cet exemple de code. Utilisation du plugin de validation Jquery et de méthodes supplémentaires. C'est le code de travail de mon projet. J'espère que cela vous aide
la source
Une autre option consiste à placer un conteneur d'erreurs en dehors de votre groupe de formulaires à l'avance. Le validateur l'utilisera ensuite si nécessaire.
la source