Home/ Questions/Q 6697389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:27:15+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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