CODEWITHSUNDEEP
javascriptjqueryhtmljquery-validateloader
Ramesh S
Ramesh S

Reputation: 804

jQuery validation success show gif loader

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>

Upvotes: 3

Views: 6210

Answers (2)

Sarvan Kumar
Sarvan Kumar

Reputation: 934

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>

Upvotes: 3

Jorg
Jorg

Reputation: 7250

Have you tried binding the submit event? There's a submitHandler in the plugin

To submit, add $('#myform').submit().

Edit;

instead of the submit event I would send it via Ajax, like

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

    $.post("insert.php", $("#myform").serialize(), function(data) {
        alert(data);

        $('.gif-loader').hide();
    });
}

However, you may need to change the way insert.php works in that case. 

$( "#myform" ).validate({
  //this bit is new.
  submitHandler: function() {
     $('.gif-loader').show();
  },
  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>

Upvotes: 1

Related Questions