head js + jquery.validate.unobtrusive + custom validators_问答_开发者

head js + jquery.validate.unobtrusive + custom validators

开发者 https://www.devze.com 2023-04-12 05:02 出处：网络

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

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 开发者_如何学Clike 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.

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>

Try $.validator.unobtrusive.parse('#the_form_in_question') after the load.

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