Magento – Javascript errors, only sometimes

There is a space in form id var myForm= new VarienForm('#calculator form', true);

Correct base on your code is var myForm= new VarienForm('#calculator_form', true);

Also make sure validation.js is loaded

Edit: that's a start. Do you have any console errors? Some how validation can't append the error div... Also try to put the new VarienForm in separate script tags

Edit 2: Try this separately

<script type="text/javascript"> 
    //< ![CDATA[ 
    var calculator_form = new VarienForm('calculator_form'); 
    //]]>
</script>

You have to set jQuery dependency for your custom script. You have occurance of problem because of dependency issue.

1. For Module/Extension Level

You can set at module/extension level dependency like below,

app/code/Packagename/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider"
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        }
    }
};

Add slider.js inside path, app/code/Packagename/Modulename/view/frontend/web/js/slider.js

You can use in any template file like this,

<script>
    require(["jquery","slider"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

2. Theme Level

If you want to apply require js changes at theme level, Go to theme module,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/requirejs-config.js

Set your theme required js file in requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider",
            'customjsfile': "Packagename_Modulename/js/customjsfile",
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        },
        'customjsfile':{
            deps: ['jquery']
        }
    }
};

Add your js file inside web folder of theme,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/slider.js
app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/customjsfile.js

In your template file,

<script>
    require(["jquery","slider","customjsfile"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

For your case,

Keep below config in requirejs-config.js file,

var config = {
    paths: {            
            'footerContact': 'Module_Contact/js/contact'
        },   
    shim: {
        'footerContact': {
            deps: ['jquery']
        }
    }
};

Inside phtml file,

<script>
  require(["jquery","footerContact"],function($)(){
    jquery('.element').on('click', function(event) {
        console.log('logging');
    });
  });
</script>