jQuery breaks when loaded from disk cache

Question

I have a script that will hide a submit button while the form processes to prevent multiple clicks on the button. Recently it appears this is not working all the time.

I can verify that the validate jQuery file is loading each time. I didn't make difference when I used the file loaded from my server or a CDN.

The error only appears when the file is loaded from disk cache. I temporarily fixed the issue by adding a random version number after the jQuery file but I wondered what could be causing the break when disk cache is used?

The browser console lists this error:

custom-quote-form:21 Uncaught TypeError: $(...).validate is not a function
    at HTMLDocument.<anonymous> (custom-quote-form:21)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.I (jquery.min.js:2)

jquery.min.js loads first, then the CMS cached JS file after that is the jquery validate file.

This is the script

<script> 
    $(function() {
        $("form[name='customBuilder']").validate({
            // remove error label  
            errorPlacement: function(error, element) {},
            rules: {
                fname: "required",
                lname: "required",
                phone: "required",
                company: "required",
                Email: {
                    required: true,
                    email: true
                },
            },
            submitHandler: function(form) {
                $("#loading-img").css("display", "block");
                form.submit();
                var elem = $("#submitMessage");
                elem.css("display", "none");
                setTimeout(function() {
                    elem.css("display", "");
                }, 10000);
            }
        });
    }); 
< /script>

Answer 1

A.Wolff set me on the right track. Removed defer="defer" from jquery validation plugin link. It was auto added by the CMS.

Answer 2

I am having a similar issue with this kind of set up. Fast forwarding, I was following the guidelines by Dev Tools of chrome to increase the speed of the page. It has identified a render blocking script(Jquery library file to be precise) on the head of the page. I (being a noob in event calls of ajax) has added "async" tag inside the script tag to load it asynchronously.

Now the new issue arrived is that when I load the page first time everything works fine. But for some random subsequent reloads break the javascript as I was loading every javascript file in async manner and some were getting loaded from disk cache as well. So I have decided to find some other ways of optimization rather then making it loaded in "async" manner.