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

发布于 2024-12-08 20:11:26 字数 1291 浏览 4 评论 0原文

我正在使用 head.js (http://headjs.com) 来异步加载我的 javascript。

我对 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 的另一个问题。

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

原文

I'm using head.js (http://headjs.com) to do async loading of my javascripts.

I have problem with jquery.validate.unobtrusive and custom validators

All custom validations should be loaded after jquery.validate and jquery.validate.unobtrusive, and I do it like following:

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

The problem is that custom-validations script should be loaded after jquery.validate.unobtrusive but before document.onready event, because jquery.validate.unobtrusive uses document.onready to do it's black magic. But, when I'm using head.js document.onready event fired before scripts starts to load, and my custom validation does not work.

Is there any common solutions/workarounds to solve this kind of problems with async script loading?

Another problem that my customer does not want to see jquery.validate/jquery.validate.onubtrusive in <head> tag.

@Url.Script - helper method for locating js files.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

下壹個目標 2024-12-15 20:11:26

我自己找到了解决方案。需要使用 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>

I've found solution by myself. Need to use jQuery.holdReady() to hold 'document.ready' while all scripts depend on jquery.validate.unobtrusive will not load.

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

回复收藏 0 原文

一桥轻雨一伞开 2024-12-15 20:11:26

加载后尝试 $.validator.unobtrusive.parse('#the_form_in_question') 。

回复收藏 0 原文

眼角的笑意。 2024-12-15 20:11:26

这应该可行：

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

This should work:

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

If you use jquery, you could add the scripts via getScript method which fires a callback when the script is loaded, so that can help :

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

回复收藏 0 原文

~没有更多了~