CODEWITHSUNDEEP
javascriptjqueryhtmlformsvalidation
Jack Graham
Jack Graham

Reputation: 25

How do I show a loading gif after clicking submit, but undo it if validations aren't met

I have a few forms live. My forms use jQuery validator for the front-end. I have a method in place right now that switches out my submit button with a loading gif. The issue is that when the validations aren't met the gif continues, not giving the user the chance to resubmit the form. I've included some of my code below, any help as appreciated.

HTML

 <div id="subbuttonfirst">
            <button onclick="anothermethod.local.submit(this.form); ButtonClicked();" class="action submit btn btn-success" >Submit</button>

JS (Replacing function) 

<script type="text/javascript">


function ButtonClicked()
{
   document.getElementById("subbuttonfirst").style.display = "none"; // to undisplay
   document.getElementById("loadbutton").style.display = ""; // to display
   return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
   if( FirstLoading )
   {
      FirstLoading = false;
      return;
   }
   document.getElementById("subbottonfirst").style.display = ""; // to display
   document.getElementById("loadbutton").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
</script>

jQuery Validations: 

 $('.form').validate({ // initialize plugin
   // ignore:":not(:visible)",      
   rules: {
    randomone: {  

      required: true, 
      number: true,

    }, 

    random: { 
      required: true,
      number: false,
    }, 

}
});

Upvotes: 1

Views: 2223

Answers (2)

AndreaG
AndreaG

Reputation: 239

Take a look to the options in the plugin documentation: http://jqueryvalidation.org/validate the invalidHandler option is what you are looking for.

You coul'd try something like this: 

$('.form').validate({ // initialize plugin
    // ignore:":not(:visible)",      
       rules: {
        randomone: {  
          required: true, 
          number: true,
        }, 

        random: { 
          required: true,
          number: false,
        }
      },

      invalidHandler: function(event, validator) {
          RestoreSubmitButton();
      }
});

EDIT - A working example

The form:

<form class='form' action="?" method="post">
<input name="randomone" id="randomone" type="text" />
<input name="random" id="random" type="text"/>
<div id="subbuttonfirst">
     <button class="action submit btn btn-success" >Submit</button>
     <div class="loadbutton">
         loading    
     </div>
</div>
</form>

The js code

$('.form').validate({ // initialize plugin
   // ignore:":not(:visible)",      
   rules: {
      randomone: {  
          required: true, 
          number: true,
      }, 

      random: { 
          required: true,
          number: false,
      }
  }, 

  submitHandler: function(){
      $(".submit").hide();
      $(".loadbutton").show();
  }, 

  invalidHandler: function(){
      $(".submit").show();
      $(".loadbutton").hide();
  }

});

A working fiddle

Upvotes: 1

RyanL
RyanL

Reputation: 468

Using invalidHandler with a callback that replaces the gif with the button.

Upvotes: 1

Related Questions