Question

在非常高的水平上发生了什么

这段代码很好......

<div id='showme'></div>

<div id='theform'>
   <form ...>
   <input required ...
   <input required ...
   <input id='thebutton' type='submit' ....
   </form>
</div>

上面的代码工作正常。如果我点击提交并且表单字段为空，我会收到标准通知。

把它扔进去，它部分起作用......

$(document).ready(function(){

   $('#thebutton').click(function() {
      $('#theform').hide();
      $('#showme').html('<img src="loading2.gif">');
   });
.
.
.

图像显示就像我想要的那样。但是，我丢失了对所需字段的所有检查。

有人可以帮忙吗？我想要做的是在用户点击提交按钮时显示加载动画gif。

由于

JT

Answer 1

多数民众赞成是因为无论是什么onclick然后把加载器gif都隐藏在表单中。你最好绑定到表单的提交事件，用javascript检查验证，看看表单是否有效，然后继续显示加载状态。使用原生HTML5 js验证，您可以使用checkValidity（）方法询问输入元素是否有效。

    if(requiredField.checkValidity() === false) //required field was not valid so you can't show loading gif yet

Answer 2

我认为这样做了。你们其中一位大师能证实吗？

   $('#thebutton').click(function(e) {
      var isvalidate = $('#contentform')[0].checkValidity();
      if (isvalidate) {
         event.preventDefault();
         $('#theform').hide();
         $('#showme').html('<img src="loading2.gif" alt="Loading" style="width:300px;">');
         $('#contentform').submit();
      }
   });

或者我做错了什么？

ajax，jquery javascript html表单验证不能与onclick一起使用

2 个答案: