jQuery Validate - Activer la validation des champs masqués

Dans la nouvelle version du plugin de validation jQuery 1.9 par défaut, la validation des champs cachés est ignorée . J'utilise CKEditor pour le champ de saisie textarea et il masque le champ et le remplace par iframe. Le champ est là, mais la validation est désactivée pour les champs masqués. Avec la version 1.8.1 du plugin de validation, tout fonctionne comme prévu.

Ma question est donc de savoir comment activer la validation des champs cachés avec le plugin de validation v1.9.

Ce paramètre ne fonctionne pas:

$.validator.setDefaults({ ignore: '' });

L'auteur du plugin dit que vous devriez utiliser "les crochets sans les guillemets" ,[]

http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/

Release: Validation Plugin 1.9.0: "... Un autre changement devrait faciliter la configuration des formulaires avec des éléments cachés, ceux-ci sont maintenant ignorés par défaut (l'option" ignorer "a maintenant": caché "par défaut). En théorie, cela pourrait casser une configuration existante. Dans le cas peu probable où ce serait le cas, vous pouvez le corriger en définissant l'option ignore-option sur «[]» (crochets sans les guillemets). "

Pour modifier ce paramètre pour tous les formulaires:

$.validator.setDefaults({ 
    ignore: [],
    // any other default options and/or rules
});

(Il n'est pas nécessaire que ce .setDefaults()soit dans la document.readyfonction)

OU pour un formulaire spécifique:

$(document).ready(function() {

    $('#myform').validate({
        ignore: [],
        // any other options and/or rules
    });

});

MODIFIER :

Consultez cette réponse pour savoir comment activer la validation sur certains champs masqués tout en ignorant les autres.

MODIFIER 2 :

Avant de laisser des commentaires disant que "cela ne fonctionne pas" , gardez à l'esprit que l'OP pose simplement des questions sur le plugin jQuery Validate et sa question n'a rien à voir avec la façon dont ASP.NET, MVC ou tout autre framework Microsoft peut modifier la normale de ce plugin comportement prévisible. Si vous utilisez un framework Microsoft, le fonctionnement par défaut du plugin jQuery Validate est écrasé par le unobtrusive-validationplugin Microsoft .

Si vous avez du mal avec le unobtrusive-validationplugin, veuillez vous référer à cette réponse à la place: https://stackoverflow.com/a/11053251/594235

Cela a fonctionné pour moi, dans un site ASP.NET MVC3 où j'avais laissé le cadre pour configurer une validation discrète, etc., au cas où cela serait utile à quiconque:

$("form").data("validator").settings.ignore = "";

Assurez-vous de mettre

 $.validator.setDefaults({ ignore: '' });

PAS à l' intérieur$(document).ready

Je vais donc aller un peu plus loin pour expliquer pourquoi cela ne fonctionne pas parce que je suis le genre de personne qui ne peut pas dormir la nuit sans savoir haha. J'utilise jQuery validate 1.10 et Microsoft jQuery Unobtrusive Validation 2.0.20710.0 qui a été publié le 29/1/2013.

J'ai commencé par rechercher la méthode setDefaults dans jQuery Validate et je l'ai trouvée à la ligne 261 du fichier non réduit. Tout ce que cette fonction fait vraiment est de fusionner vos paramètres json dans les paramètres existants $.validator.defaultsqui sont initialisés avec la propriété ignore définie sur ": hidden" avec les autres valeurs par défaut définies dans jQuery Validate. Donc, à ce stade, nous avons remplacé ignorer. Voyons maintenant où cette propriété par défaut est référencée.

Quand j'ai tracé à travers le code pour voir où $.validator.defaultsest référencé. J'ai remarqué qu'il n'était utilisé que par le constructeur pour un validateur de formulaire, ligne 170 dans jQuery validate un fichier non minifié.

// constructor for validator
$.validator = function( options, form ) {
    this.settings = $.extend( true, {}, $.validator.defaults, options );
    this.currentForm = form;
    this.init();
};

À ce stade, un validateur fusionnera tous les paramètres par défaut définis et les attachera au validateur de formulaire. Lorsque vous regardez le code qui effectue la validation, la mise en évidence, la désactivation, etc., ils utilisent tous l'objet validator.settings pour extraire la propriété ignore. Nous devons donc nous assurer que si nous devons définir ignore avec la méthode setDefaults, cela doit se produire avant que le $ ("form"). Validate () ne soit appelé.

Si vous utilisez Asp.net MVC et le plugin discret, vous vous rendrez compte après avoir regardé le javascript que validate est appelé dans document.ready. J'ai également appelé mon setDefaults dans le bloc document.ready qui va s'exécuter après les scripts, jquery validate et discret car j'ai défini ces scripts dans le html avant celui qui contient l'appel. Donc, mon appel n'a évidemment eu aucun impact sur la fonctionnalité par défaut de sauter les éléments cachés lors de la validation. Il y a quelques options ici.

Option 1 - Vous pouvez, comme l'a souligné Juan Mellado, avoir l'appel en dehors du document.ready qui s'exécuterait dès que le script aurait été chargé. Je ne suis pas sûr du moment choisi car les navigateurs sont désormais capables de charger des scripts en parallèle. Si je suis juste trop prudent, veuillez me corriger. En outre, il y a probablement des moyens de contourner ce problème, mais pour mes besoins, je n'ai pas suivi cette voie.

Option 2a - La valeur sûre à mes yeux est de simplement remplacer l' $.validator.setDefaults({ ignore: '' });intérieur de l'événement document.ready par $("form").data("validator").settings.ignore = "";. Cela modifiera la propriété ignore qui est réellement utilisée par jQuery validate lors de chaque validation sur vos éléments pour le formulaire donné.

Options 2b - Après avoir examiné un peu plus le code, vous pouvez également l'utiliser $("form").validate().settings.ignore = "";comme moyen de définir la propriété ignore. La raison en est qu'en regardant la fonction de validation, il vérifie si un objet de validation a déjà été stocké pour l'élément de formulaire via la $.data()fonction. S'il trouve un objet validateur stocké avec l'élément form, il renvoie simplement l'objet validateur au lieu d'en créer un autre.

Cela a fonctionné pour moi dans un site ASP.NET. Pour activer la validation sur certains champs masqués, utilisez ce code

$("form").data("validator").settings.ignore = ":hidden:not(#myitem)";

Pour activer la validation de tous les éléments du formulaire, utilisez celui-ci $("form").data("validator").settings.ignore = "";

Notez que les utiliser dans $(document).ready(function() { })

Juste ajouté ignore: []dans la page spécifique pour le formulaire spécifique, cette solution a fonctionné pour moi.

$("#form_name").validate({
        ignore: [],
        onkeyup: false,
        rules: {            
        },      
        highlight:false,
    });

Cela fonctionne pour moi.

jQuery("#form_name").validate().settings.ignore = "";

La validation fonctionnait pour moi lors de la soumission du formulaire, mais elle ne faisait pas la validation réactive pilotée par les événements lors de l'entrée dans les listes de sélection choisies.

Pour résoudre ce problème, j'ai ajouté ce qui suit pour déclencher manuellement l'événement de validation jquery qui est ajouté par la bibliothèque:

$(".chosen-select").each(function() {
  $(this).chosen().on("change", function() {
    $(this).parents(".form-group").find("select.form-control").trigger("focusout.validate");
  });
});

jquery.validate va maintenant ajouter la .validclasse à la liste de sélection sous-jacente.

Avertissement: Cela nécessite un modèle HTML cohérent pour vos entrées de formulaire. Dans mon cas, chaque fichier d'entrée est enveloppé dans un div.form-group, et chaque entrée a .form-control.

Trouvez simplement le texte ignore: ": hidden" dans votre fichier de validation jquery et commentez-le. Après avoir commenté cela, il ne perdra jamais aucun élément caché à valider ...

Merci