jQuery Girl
  1. jQuery Girl
  3. RequireJS avec validation jQuery
Intereting Posts
jQuery data () vs attr (data) Jquery replacewith fade / animate Comment obtenir la date et l’heure actuelles du client sur asp.net? Comment envoyer / télécharger un fichier en utilisant jquery ou javascript? Utilisation de jquery ajax pour appeler une méthode de bean géré par jsf (un gestionnaire d’écouteur AjaxBehaviorEvent) Toujours au-dessus div dans la zone Accéder à un bouton dans l’IFrame Jquery accordéion ne retire pas Class et n’échange pas son texte Développer pour Réduire Désactivez le bouton d’envoi après avoir cliqué et réactivez-le après quelques secondes. événement de clic div ne fonctionne pas élément jquery move à la dernière position enfant Comment puis-je exécuter plusieurs effets JQuery simultanés? Comment sélectionner toutes les balises p vides avec jQuery? Faire que $ .getScript (“”) n’ajoute pas de nombres à la fin de la requête VueJS Accordion Table – Contraintes pour un système basé sur le temps réel

RequireJS avec validation jQuery

J’essaie d’utiliser RequireJS pour append les références à mes fichiers de script de validation jQuery. J’ai 3 fichiers de script au lieu de 1:

  1. jquery.validate – La bibliothèque de validation jquery
  2. jquery.validate.unobtrusive – Ceci ajoute une validation discrète à la bibliothèque de validation jquery (vous pouvez donc utiliser les atsortingbuts de données et les relier automatiquement). Cela dépend de jquery.validate
  3. jquery.validate.custom – Ceci ajoute mes propres méthodes personnalisées de validation non intrusives et dépend de jquery.validate.unobtrusive

J’ai configuré la configuration suivante: 

require.config({ paths: { 'jquery': 'Scripts/jquery-1.8.3.min', 'jquery.validate': 'Scripts/jquery.validate.custom' }, shim: { 'Scripts/jquery.validate': ['jquery'], 'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'], 'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive'] } });

Maintenant j’ai le module suivant: 

 define(['jquery', 'jquery.validate'], function($) { alert('Yey!'); });

Cependant, une erreur est générée dans le fichier jquery.validate.custom en m’indiquant que la dépendance non intrusive n’a pas été injectée. Après avoir débogué avec les outils du navigateur et consulté l’onglet Réseau, je constate qu’il télécharge correctement les fichiers jquery.validate.custom.js et jquery.validate.js mais il n’essaie même pas de télécharger les fichiers jquery.validate.unobtrusive. fichier js.

J’apprécierais que quelqu’un me montre ce que je fais mal. Merci

Modifier:

J’ai maintenant essayé: 

 require.config({ paths: { 'jquery': 'Scripts/jquery-1.8.3.min', 'jquery.validate': 'Scripts/jquery.validate.custom' }, shim: { 'Scripts/jquery.validate': ['jquery'], 'Scripts/jquery.validate.unobtrusive': ['jquery', 'Scripts/jquery.validate'], 'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive'] } });

Et ça fonctionne correctement. J’ai aussi essayé ce qui suit car je trouve que ça a l’air mieux 

 require.config({ paths: { 'jquery': 'Scripts/jquery-1.8.3.min', 'jquery.validate': 'Scripts/jquery.validate.custom', 'jquery.validate.core': 'Scripts/jquery.validate', 'jquery.validate.unobtrusive': 'Scripts/jquery.validate.unobtrusive' }, shim: { 'jquery.validate.core': ['jquery'], 'jquery.validate.unobtrusive': ['jquery', 'jquery.validate.core'], 'jquery.validate': ['jquery', 'jquery.validate.unobtrusive'] } });

Mais cela donne une erreur de délai d’attente.

Si quelqu’un pouvait expliquer pourquoi la deuxième solution ne fonctionne pas, ce serait formidable. Merci

Vous aurez besoin de réparer une seule clé dans votre configuration. Changer cette ligne: 

 'Scripts/jquery.validate.custom': ['jquery', 'Scripts/jquery.validate.unobtrusive']

Avec ce qui suit: 

 'jquery.validate': ['jquery', 'Scripts/jquery.validate.unobtrusive']

Et tout fonctionnera. En effet, si vous utilisez jquery.validate comme chemin, vous devez utiliser le même nom dans shim config pour que toutes les dépendances fonctionnent correctement.

Je crois que les clés dans la cale doivent correspondre aux noms que vous avez besoin dans votre module. De plus, je pense que le problème est d’utiliser le nom jquery.validate, puis de le mapper sur custom.

Pour moi, la structure suivante serait plus intuitive: 

 require.config({ paths: { jquery: 'Scripts/jquery-1.8.3.min', jquery_validate: 'Scripts/jquery.validate' jquery_validate_unobtrusive: 'Scripts/jquery.validate.unobtrusive' jquery_validate_custom: 'Scripts/jquery.validate.custom' }, shim: { jquery: { exports: ['jQuery', '$'] }, jquery_validate: ['jquery'], jquery_validate_unobtrusive: ['jquery_validate'], jquery_validate_custom: ['jquery_validate_unobtrusive'] } });

Et ensuite dans votre module, demandez le fichier personnalisé: 

 define(['jquery', 'jquery_validate_custom'], function($) { alert('Yey!'); });

EDIT: réfléchissez davantage à votre configuration d’origine et aux raisons pour lesquelles elle ne fonctionne pas: le problème que vous avez est que vous essayez d’interperser l’utilisation de chemins complets avec des alias de modules dans la section shim. RequireJS ne semble pas fonctionner de cette façon. Cela semble être un processus de résolution à sens unique:

Noms de modules demandés -> développer des modules supplémentaires à partir de shim config -> charger les fichiers réels en fonction du mappage de chemin

Considérant que ce que vous essayez de faire est:

Noms de modules demandés (jquery.validate) -> résolution en fichiers réels en fonction du mappage de chemin (jquery.validate.custom) -> extension à tout module supplémentaire à partir de shim config -> résolution des chemins à nouveau

Ainsi, par exemple, cela fonctionne bien: 

 require.config({ paths: { module1: 'module1file', module2: 'module2file', module3: 'module3file' }, shim: { module3: ['module2'], module2: ['module1'] } }); require(['module3'], function( ) { });

Mais cela ne veut pas: 

 require.config({ paths: { module1: 'module1file', module2: 'module2file', module3: 'module3file' }, shim: { module3: ['module2'], module2file: ['module1'] } }); require(['module3'], function( ) { });