避免刷新页面和必填字段不起作用答案

【问题标题】：avoid refresh page and required field doesn't work避免刷新页面和必填字段不起作用
【发布时间】：2020-08-26 15:48:50
【问题描述】：

我想提交一个禁用刷新的表单，并且我希望 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');
});

为什么我的表单刷新并且没有验证必填字段？

【问题讨论】：

标签： javascript html jquery required

【解决方案1】：

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

方法如下

使用提交事件
将提交按钮移至表单

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

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

$("#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>

【讨论】：

我希望我的按钮在表单之外，因为我正在为它创建动态表单
我可以使用 javascript 动态添加表单="test" 吗？
取决于你打算怎么做。如果动态添加表单，则需要将提交事件委托给包装它/它们的容器
我有这种情况。我正在动态更改表单的名称以实现添加和编辑等可重用性方法。我可以动态添加那个标签吗？
查看我的更新，了解我认为您的意思。如果您在表单上使用类，则可以在我的第三个示例中随意更改名称