<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#submitting{
display:none;
position: absolute;
top: 50%;
left: 45%;
margin-left:auto;
margin-right:auto;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>var jQ = $.noConflict(true);
// version 1
jQ(document).ready(function() {
jQ('form').on('submit', function(e){
form = this;
var submitButton = jQ(this).find('input[type=submit]');
var error = jQ(':input.error').filter('[required]:visible').length;
if(error == "0"){
jQ('#submitting').css('display','block');
jQ('#overlay').css('display','block');
}
event.preventDefault();
setTimeout( function () {
form.submit();
}, 300);
});
});
</script>