// 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>