- ...
- ...
Le JS
//Bootstrap popover $('[data-toggle="popover"]').popover({ sortinggger: "hover focus", container: "body", placement: "bottom", html: true, title: "Name Tips", content: function() { return $('#namePopoverContent').html();} }); //Chosen select plugin $(function() { $('.chosen-select').chosen(); $('.chosen-select-deselect').chosen({ allow_single_deselect: true }); }); //JQuery validate plugin $(function() { $.validator.setDefaults({ errorClass: 'text-danger', ignore: ':hidden:not(.chosen-select)', errorPlacement: function (error, element) { if (element.hasClass('chosen-select')) error.insertAfter(element.siblings(".chosen-container")); else { error.insertAfter(element); } } }); //rules and messages objects $("#taskForm").validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); } }); $('.taskNameValidation').each(function() { $(this).rules('add', { required: true, messages: { required: "Provide a space-separated name" } }); }); $('.taskDatasetValidation').each(function() { $(this).rules('add', { required: true, messages: { required: "Choose a dataset" } }); }); });
J’ai eu du mal avec cela sans aucune chance. Toute aide est la bienvenue.
- Ouvrez Datepicker en cliquant sur un lien.
- Charger par programme CSS à l’aide de JS
- Chargement de contenu div dynamic avec jQuery à partir d’une URL
- jQuery obtenir des couleurs aléatoires à partir d’une liste donnée
- convertir le format de chaîne de temps
-
Empêchez le contrôle textarea d’appliquer l’état de validation de succès, car ce contrôle de formulaire n’est pas en cours de validation car il est facultatif.
La zone de
textarea
vide est “valide” car votre validation indique qu’un champ vide est valide. Il est donc vert. Vous pouvez conditionnellement utiliserhighlight
ethighlight
pour ne pas l’appliquer à votre zone detextarea
. Cependant, cela ne fonctionnera pas si votre règlemaxlength
est évaluée.Je ne connais aucune solution de contournement qui aurait pour effet d’ignorer laAucune condition / état “facultatif” n’est fourni dans ce plugin … une fois le formulaire évalué, les champs sont “valides” ou “non valides”, rien entre les deux.unhighlight
lorsque le champ est techniquement “valide” et encore vide.EDIT : Vous pouvez appliquer conditionnellement
highlight
et nonhighlight
la zone detextarea
à l’aide du sélecteur custom:blank
et appliquer une classe à cet élément “facultatif”. Ensuite, vous aurez toujours les contours rouges et verts, mais uniquement lorsque ce champ “facultatif” est rempli et / ou vos règles sont évaluées.highlight: function (element) { if (! ($(element).hasClass('optional') && $(element).is(':blank'))) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); } }, unhighlight: function (element) { if (! ($(element).hasClass('optional') && $(element).is(':blank'))) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); } }
-
Appliquez l’état de validation de l’erreur à la bordure de la liste déroulante. À l’heure actuelle, seul le libellé obtient l’état de validation d’erreur appliqué.
Vous devez consulter le DOM rendu et rechercher l’élément Chosen créé de manière dynamic. Ensuite, vous devez écrire jQuery pour aller sur cet élément et appliquer de manière conditionnelle les classes appropriées en
highlight
et enhighlight
.highlight: function (element) { if ($(element).hasClass('chosen-select')) { $(element).siblings('.chosen-container').removeClass('has-success').addClass('has-error'); } $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function (element) { if ($(element).hasClass('chosen-select')) { $(element).siblings('.chosen-container').removeClass('has-error').addClass('has-success'); } $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); }
Ce code ci – dessus applique les classes
has-error
ethas-success
à l’élémentdiv
Chosen rendu; il vous suffit d’ajuster votre CSS pour qu’il y ait une bordure rouge. Sinon, écrivez vos propres classes CSS pour cela, comme je l’ai fait dans la démo ci-dessous. Ajuste en accord. -
Supprimez l’état de validation d’erreur et le message d’erreur, puis appliquez la classe de réussite lorsque l’utilisateur choisit une option dans la liste déroulante.
Vous devez écrire un gestionnaire de
change
qui appelle la méthode.valid()
sur l’élémentselect
chaque fois qu’il change. En effet, vous interagissez avec la liste de sélection rendue et non avec l’élément deselect
réel. Sinon, le plug-in jQuery Validate n’est pas correctement déclenché.$('.chosen-select').on('change', function () { $(this).valid(); });