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

用这个小提琴

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

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>