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

在一个非常高的层面上，这就是发生的事情

这段代码运行得很好

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

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

这是因为无论单击什么，都会隐藏表单，然后将加载程序放入gif。您最好绑定到表单的提交事件，使用javascript检查验证以查看表单是否有效，然后继续显示加载状态。使用本机HTML5 js验证，您可以使用下面的checkValidity（）方法询问输入元素是否有效

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

我想这就行了。你们中的一位大师能证实吗

   $('#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();
      }
   });

$（“#按钮”）。单击（函数（e）{
var isvalidate=$（'#contentform'）[0]。checkvalidation（）；
如果（isvalidate）{
event.preventDefault（）；
$（'#theform'）.hide（）；
$（'#showme'）.html（''）；
$（'#contentform'）。提交（）；
}
});

还是我做错了什么？
在使用javascript提交表单时，请检查此答案以强制浏览器进行本机验证：
   $('#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();
      }
   });