head js + jquery.validate.unobtrusive + validateurs personnalisés

Question

J'utilise head.js (http://headjs.com) pour effectuer le chargement asynchrone de mes javascripts.

J'ai un problème avec jquery.validate.unobtrusive et les validateurs personnalisés

Toutes les validations personnalisées doivent être chargées après jquery.validate et jquery.validate.unobtrusive, et je le fais comme suit:

<head>
    <script src="@Url.Script("jquery")"></script>
    <script src="@Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
    <script>
    head.js("@Url.Script("jquery.validate")", function () {
            head.js("@Url.Script("jquery.validate.unobtrusive")", function () {
                    head.js("@Url.Script("custom-validations")");
                });                
        });
    </script>
</body>

Le problème est que le script custom-validations doit être chargé après jquery.validate.unobtrusive mais avant l'événement document.onready, car jquery.validate.unobtrusive utilise document.onready pour faire sa magie noire. Mais, lorsque j'utilise un head.js document.onready événement déclenché avant le début du chargement des scripts, et ma validation personnalisée ne fonctionne pas.

Existe-t-il des solutions / solutions de contournement communes pour résoudre ce type de problèmes avec le chargement des scripts asynchrones?

Un autre problème que mon client ne souhaite pas voir jquery.validate / jquery.validate.onubtrusive dans la balise <head>.

@Url.Script - méthode d'aide pour localiser les fichiers js.

javascript jquery jquery-validate unobtrusive-validation

1

hazzik 10 oct. 2011 à 21:03

Answer 1

J'ai trouvé la solution par moi-même. Vous devez utiliser jQuery.holdReady () pour conserver 'document.ready' pendant que tous les scripts dépendent de jquery.validate.unobtrusive ne se charge pas.

<head>
    <script src="@Url.Script("jquery")"></script>
    <script src="@Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
    <script>
        head.js("@Url.Script("jquery.validate")", function () {
            $.holdReady(true); // set semaphore for dom ready. 
            head.js("@Url.Script("jquery.validate.unobtrusive")", function () {
                    head.js("@Url.Script("custom-validations")", function () { //fires when all provided scripts are loaded
                        $.holdReady(false); // release semaphore and fire event
                    });
            });                
        });
    </script>
</body>

2

hazzik 17 oct. 2011 à 13:45

Answer 2

Essayez $ .validator.unobtrusive.parse ('# the_form_in_question') après le chargement.

0

Scott A 14 oct. 2011 à 22:39

Answer 3

Cela devrait fonctionner:

head.ready("@Url.Script("jquery.validate")", function () {
    head.ready("@Url.Script("jquery.validate.unobtrusive")", function () {
        head.ready("@Url.Script("custom-validations")",function(){
            // your code here
        });
    });                
});

Si vous utilisez jquery, vous pouvez ajouter les scripts via la méthode getScript qui déclenche un rappel lorsque le script est chargé, ce qui peut aider:

$(document).ready(function(){
    $.getScript("@Url.Script("jquery.validate")",function(){
          $.getScript("@Url.Script("jquery.validate.unobtrusive")",function(){
              $.getScript("@Url.Script("custom-validations")",function(){
                  // do your stuff here
              });
          });
    });
});

-1

gion_13 17 oct. 2011 à 14:09

head js + jquery.validate.unobtrusive + validateurs personnalisés

3 réponses

Questions connexes

De nouvelles questions

javascript