CODEWITHSUNDEEP
javascriptjqueryjquery-validateunobtrusive-validation
hazzik
hazzik

Reputation: 13344

head js + jquery.validate.unobtrusive + 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 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.

Upvotes: 1

Views: 641

Answers (3)

gion_13
gion_13

Reputation: 41533

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

Upvotes: -1

hazzik
hazzik

Reputation: 13344

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>

Upvotes: 2

Scott A
Scott A

Reputation: 7834

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

Upvotes: 0

Related Questions