// Use the ID of "submit-form" in the form tag and class of "submit-button" in the submit tag
// Like this <form id="submit-form" action="" method="POST">
// And this <button type="submit" id="submit" class="submit-button">Submit</button>
// And use the script below to check if it is not empty, and most importantly, the required ones are not empty. I don't think there's a point trying to force unrequired inputs to be set if you did not include that in your HTML
<script>
(function(){
$('.submit-button').on('submit', function(){
var thisFormInput = document.querySelector('#submit-form');
var thisFormInputCount = thisFormInput.length;
var errors = 0;
for (var i = 0; i < thisFormInputCount; i++) {
if (thisFormInput[i].value === '' && thisFormInput[i].required === true) {
errors++;
}
}
if (count === 0) {
// Disable the button so that it cannot be further clicked
document.querySelector("#submit").disabled = true;
// If you want, include font awesome in your header then this can replace the button text with a spinner
document.querySelector("#submit").innerHTML = '<i class="fa fa-circle-o-notch fa-spin" style="font-size:16px"></i>';
}
})
})();
</script>