javascript - 避免刷新页面且必填字段不起作用

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. 将提交按钮移至表单

$('#test').on("submit", function(e) {
  e.preventDefault();
  // $.post(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 type="submit">Save</button>
</form>

或在标签上使用 form="test"

$('#test').on("submit", function(e) {
  e.preventDefault();
  // $.post(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/>
</form>
<button type="submit" form="test">Save</button>

如果您打算动态添加表单，则需要委托(delegate)

$("#container").on("submit", ".dynForm", function(e) {
  e.preventDefault();
  // $.post(url.....)
  console.log('success', this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <form id="test1" class="dynForm">
    <input type="text" name="title" required/>
  </form>
  <form id="test2" class="dynForm">
    <input type="text" name="title" required/>
  </form>
  <form id="test3" class="dynForm">
    <input type="text" name="title" required/>
  </form>
</div>


<button type="submit" form="test1">Save 1</button>
<button type="submit" form="test2">Save 2</button>
<button type="submit" form="test3">Save 3</button>