Toggle visibility of buttons on forgotten required form fields

Question

I have several forms on my profile page. Each form has its own submit button. When a user clicks the submit button, I want the button to disappear and show a spinner.

That works fine. The issue that I am running into, is that if the user forgets to fill-out a required field, the button does not return visible. The spinner stays visible. And the page would have to be reloaded.

Jquery is not intercepting the form submission (though I am open to that if it will fix the issue), it is only toggling the spinner and button visibility.

Any help?

 $("#profile-loading").hide(); $("#social-loading").hide(); $(document).ready(function () { $("#btn_profile").on("click", function (e) { $("#profile-loading").show(); $("#btn_profile").hide(); checkForm('#formProfile', "#btn_profile", "#profile-loading"); }); $("#btn_social").on("click", function (e) { $("#social-loading").show(); $("#btn_social").hide(); checkForm('#formSocialMedia', "#btn_social", "#social-loading"); }); }); //Check the passed in form and toggle the buttons and the loading spinner function checkForm($formid, $buttonid, $spinnerid) { var emptyFields = $('#formProfile .required').filter(function () { return $(this).val() === ""; }).length; if (emptyFields === 0) { console.log("no emptyFields"); } else { console.log("emptyFields"); return false; } //I tried looping through each form field, but can't seem to get the form targeted. // $($formid + '.required').each(function () { // console.log("checkForm"); // // var self = $(this) // if (self.val() === '') { // // empty // console.log("empty"); // } else { // // not empty // console.log("NOT empty"); // } // }); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="somelink" id="formProfile"> <input id="name" name="name" type="text" required="required"> <input id="url" name="url" type="text" required="required"> <i class="fas fa-spinner fa-2x fa-spin" id="profile-loading"></i> <button id="btn_profile" type="submit">Save Changes</button> </form> <form method="post" action="someotherlink" id="formSocialMedia> <input id="facebook" name="facebook" type="text" required="required"> <input id="instagram" name="instagram" type="text" required="required"> <i class="fas fa-spinner fa-2x fa-spin" id="social-loading"></i> <button id="btn_social" type="submit">Save Changes</button> </form>

Answer 1

There are several issues with your code, but the most important one is that you are retrieving required form elements using a required class, which does not seem to be used in your html. Instead, you can retrieve required form elements using something like

$('#formProfile [required]')

which returns all subelements of formProfile which have the required attribute. You have another issue in that the id of the form is hard-coded. Instead of hard-coding it, use the variable $formid .

$($formid + ' [required]')

Answer 2

Try reordering your scripts, do validation first and check if it's pass. Make sure the checkForm returns true if valid.

$("#btn_profile").on("click", function (e) {
  if (checkForm('#formProfile', "#btn_profile", "#profile-loading")) {
    $("#profile-loading").show();
    $("#btn_profile").hide();
  }
});

$("#btn_social").on("click", function (e) {
  if (checkForm('#formSocialMedia', "#btn_social", "#social-loading")) {
    $("#social-loading").show();
    $("#btn_social").hide();
  }
});