Question

我正在使用head.js（http://headjs.com）对我的javascripts进行异步加载。

我遇到jquery.validate.unobtrusive和自定义验证器

的问题

应在jquery.validate和jquery.validate.unobtrusive之后加载所有自定义验证，并按以下方式加载：

<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>

问题是custom-validations脚本应该在jquery.validate.unobtrusive之后但document.onready事件之前加载，因为jquery.validate.unobtrusive使用document.onready来做黑魔术。但是，当我在脚本开始加载之前使用head.js document.onready事件时，我的自定义验证不起作用。

是否有任何常见的解决方案/解决方法来解决异步脚本加载的这类问题？

我的客户不希望在jquery.validate代码中看到jquery.validate.onubtrusive / <head>的另一个问题。

@Url.Script - 用于定位js文件的辅助方法。

Answer 1

我自己找到了解决方案。需要使用jQuery.holdReady()来保存'document.ready'，而所有脚本都依赖于jquery.validate.unobtrusive将无法加载。

<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>

Answer 2

加载后尝试$ .validator.unobtrusive.parse（'＃the_form_in_question'）。

Answer 3

这应该有效：

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
        });
    });                
});

如果使用jquery，可以通过getScript方法添加脚本，该方法在加载脚本时触发回调，这样可以提供帮助：

$(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
              });
          });
    });
});

head js + jquery.validate.unobtrusive +自定义验证器

3 个答案: