我在其中一个表单中使用了jQuery验证插件。验证规则工作正常。
但我的问题是如果验证成功，点击提交按钮后显示gif loader。
有人可以指出我如何使其发挥作用的正确方向吗？
$( "#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>
答案 0 :(得分：2)
使用此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>
答案 1 :(得分：1)
您是否尝试过绑定提交事件？插件中有一个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>