jQuery validation success show gif loader

Question

I have using jQuery validation plug in for one of my forms. The validation rules are working fine.

But my question is if validation success, after click submit button show gif loader.

Can someone please point me in the right direction of how to get this to work?

$( "#myform" ).validate({
  rules: {
    fullname: {
      required: true
    },
    mobile:{
    	required:true,
    	minlength: 10,
    	number:true
    },
    email:{
    	required:true,
    	email:true
    }
  },
  messages: {
	    fullname: {
	        required: "Please enter your name"
	    },
	    mobile:{
	    	required: "Please enter your mobile number",
	    	minlength:"Minumum length 10 digits"
	    },
	    email:{
	    	required: "Please enter your email-id",
	    	email: "Invalid email-id"
	    }
	}
});

.gif-loader
{
  display:none;
}

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="gif-loader">
<img src="https://www.voya.ie/Interface/Icons/LoadingBasketContents.gif" />
</div>
<form method="POST" id="myform" class="submit" action="insert.php">
	<input type="text" placeholder="Full Name" id="fullname" name="fullname">
	<input type="text" maxlength="10"  title="Enter your 10 digit mobile number" placeholder="Mobile No." name="mobile" id="mobile" >
	<input type="text" placeholder="Email Id" name="email" id="email">
	<select name="demo_date" id="demo_date">
		<option value="">Select Demo Date</option>
		<option value="20-03-2018"> 20th Mar 2018</option>
		<option value="21-03-2018"> 21st Mar 2018</option>
		<option value="22-03-2018"> 22nd Mar 2018</option>
		<option value="23-03-2018"> 23rd Mar 2018</option>
	</select>
	<select name="demo_time" id="demo_time">
		<option value="">Select Time</option>
		<option value="10:00 AM">10:00 AM</option>
		<option value="04:00 PM">04:00 PM</option>
	</select>
	<input type="submit" value="Register here" class="download-button" name="submit">
</form>

Answer 1

Use this fiddle

You need to add submit handler for that...

submitHandler: function() { $(".gif-loader").show(); }

$( "#myform" ).validate({
  rules: {
    fullname: {
      required: true
    },
    mobile:{
    	required:true,
    	minlength: 10,
    	number:true
    },
    email:{
    	required:true,
    	email:true
    }
  },
  messages: {
	    fullname: {
	        required: "Please enter your name"
	    },
	    mobile:{
	    	required: "Please enter your mobile number",
	    	minlength:"Minumum length 10 digits"
	    },
	    email:{
	    	required: "Please enter your email-id",
	    	email: "Invalid email-id"
	    }
	},
  submitHandler: function() { $(".gif-loader").show(); $('#myform').submit();}
});

.gif-loader
{
  display:none;
}

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="gif-loader">
<img src="https://www.voya.ie/Interface/Icons/LoadingBasketContents.gif" />
</div>
<form method="POST" id="myform" class="submit" action="insert.php">
	<input type="text" placeholder="Full Name" id="fullname" name="fullname">
	<input type="text" maxlength="10"  title="Enter your 10 digit mobile number" placeholder="Mobile No." name="mobile" id="mobile" >
	<input type="text" placeholder="Email Id" name="email" id="email">
	<select name="demo_date" id="demo_date">
		<option value="">Select Demo Date</option>
		<option value="20-03-2018"> 20th Mar 2018</option>
		<option value="21-03-2018"> 21st Mar 2018</option>
		<option value="22-03-2018"> 22nd Mar 2018</option>
		<option value="23-03-2018"> 23rd Mar 2018</option>
	</select>
	<select name="demo_time" id="demo_time">
		<option value="">Select Time</option>
		<option value="10:00 AM">10:00 AM</option>
		<option value="04:00 PM">04:00 PM</option>
	</select>
	<input type="submit" value="Register here" class="download-button" name="submit">
</form>