jQuery 验证成功显示 gif 加载器

Question

我在其中一个表单中使用了jQuery 验证插件。验证规则运行良好。

但我的问题是如果验证成功，点击提交按钮后显示 gif 加载器。

有人能给我指出如何让它发挥作用的正确方向吗？

$( "#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

使用这个fiddle

您需要为此添加提交处理程序...

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>

Answer 2

你试过绑定提交事件吗？插件里面有个submitHandler

要提交，请添加$('#myform').submit()。

编辑；

我将通过 Ajax 发送它而不是提交事件，例如

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

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

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

但是，您可能需要更改 insert.php 在这种情况下的工作方式。

$( "#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>