避免刷新页面，必填字段不起作用

Question

我想提交禁用刷新的表单，并且我希望ajax进行POST请求以避免刷新页面。

这里有这样的结构，但我的必需标记不起作用

<form id="test">
     <input type="text" name="title" required/>
</form>

<button id="submitForm">Save</button>

然后我像这样制作javascript：

$('#submitForm').click(function(e){
     e.preventDefault();
     $("#test").submit();
     console.log('success');
});

为什么我的表单刷新而不验证必填字段？

Answer 1

您正在绕过免费获得的所有东西。

这里是

1. 使用提交事件
2. 将提交按钮移至表单（或在标签上使用form =“ test”）

$('#test').on("submit", function(e) {
  e.preventDefault();
  // $.get(url.....)
  console.log('success');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="test">
  <input type="text" name="title" required/>

  <button id="submitForm">Save</button>

</form>