优化表单提交体验：如何在添加加载动画时保留HTML5验证功能

在现代web开发中，为了提升用户体验，我们经常在表单提交后为提交按钮添加加载指示器（loading spinner），以告知用户操作正在进行中。然而，一个常见的陷阱是，当开发者选择在按钮的 click 事件中触发加载状态时，可能会无意中绕过浏览器原生的html5表单验证机制，例如 required 属性。这会导致用户在未填写必填字段的情况下也能“提交”表单，从而影响数据完整性和用户体验。

问题分析：为何HTML5验证失效？

HTML5的表单验证（如 required、type="email" 等）是浏览器在表单尝试提交时自动执行的。当用户点击一个 type="submit" 的按钮时，浏览器会首先检查所有带有验证属性的输入字段。如果存在不合法的输入（例如，required 字段为空），浏览器会阻止表单提交，并显示相应的验证提示信息。

当我们将加载指示器的逻辑绑定到提交按钮的 click 事件上时，问题就出现了。在 click 事件处理函数内部，如果立即禁用按钮并手动触发表单提交（例如 $("#save").submit();），实际上是在浏览器完成其原生验证流程之前就“劫持”了提交行为。这使得浏览器没有机会执行其默认的HTML5验证。

错误的实现方式及其影响

让我们来看一个常见的、会导致HTML5验证失效的实现示例。在这个例子中，开发者希望在用户点击“保存”按钮后立即显示加载状态。

示例代码：

立即学习“前端免费学习笔记（深入）”；

<form method="post" action="" id="save">     
  <input class="input" name="passwort" type="password" placeholder="Enter your password here" required />
  <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $("#load").click(function() {
          // 禁用按钮
          $(this).prop("disabled", true);
          // 添加加载指示器
          $(this).html(
              `<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
          );
          // 手动触发表单提交，这会绕过HTML5原生验证
          $("#save").submit(); 
      });
  });
</script>

在上述代码中，当用户点击 id="load" 的按钮时，click 事件会被触发。在事件处理函数内部，按钮立即被禁用，加载指示器被添加，然后通过 $("#save").submit(); 强制触发了表单的提交。由于这个过程发生在浏览器原生验证之前，即使 passwort 字段是空的，表单也会尝试提交，而不会显示“请填写此字段”的提示。

正确的解决方案：监听表单的 submit 事件

解决这个问题的关键在于，将加载状态的逻辑绑定到表单的 submit 事件上，而不是按钮的 click 事件。submit 事件会在浏览器完成所有HTML5验证之后（且验证通过时）才触发。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

修改后的示例代码：

<form method="post" action="" id="save">     
  <input class="input" name="passwort" type="password" placeholder="Enter your password here" required />
  <button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      // 监听表单的submit事件
      $("#save").submit(function(e) { 
         // 只有当HTML5验证通过后，此处的代码才会被执行
         // 禁用按钮
         $('#load').prop("disabled", true);
         // 添加加载指示器
         $('#load').html(
            `<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
         );
         // 注意：这里不需要手动调用 $("#save").submit();
         // 浏览器会继续其默认的表单提交行为
      });
  });
</script>

通过将事件监听器从 #load 按钮的 click 事件转移到 #save 表单的 submit 事件，我们确保了以下流程：

1. 用户点击提交按钮。
2. 浏览器执行HTML5表单验证。
3. 如果所有 required 字段都已填写且其他验证规则通过，浏览器允许表单提交。
4. 此时，$("#save").submit() 事件被触发。
5. 在 submit 事件处理函数中，我们禁用按钮并显示加载指示器。
6. 表单继续其默认的提交行为（例如，向 action 指定的URL发送数据）。

这样，HTML5的 required 属性就能正常工作，只有在所有必填字段都填写完毕后，加载指示器才会出现，表单才会真正提交。

注意事项与最佳实践

• 始终优先监听 submit 事件：对于任何需要在表单提交前或提交时执行的逻辑（如显示加载状态、执行额外验证、数据预处理等），都应该绑定到表单的 submit 事件上。
• 防止重复提交：在 submit 事件中禁用提交按钮是一个很好的实践，可以有效防止用户在等待响应期间多次点击按钮，导致重复提交数据。
• 恢复按钮状态：如果表单是通过 AJAX 提交的，务必在 AJAX 请求成功或失败的回调函数中恢复按钮的原始状态（启用按钮，移除加载指示器，恢复按钮文本），以便用户可以进行后续操作或重试。
• 服务器端验证不可或缺：尽管HTML5和JavaScript提供了客户端验证，但它们只能提升用户体验。出于安全和数据完整性考虑，服务器端验证是必不可少的，客户端验证可以被绕过。
• 用户反馈：除了加载指示器，考虑提供其他形式的用户反馈，例如提交成功或失败的消息提示。

总结

正确处理Web表单提交时的加载状态与HTML5验证是提升用户体验和确保数据完整性的关键。通过将加载指示器的逻辑绑定到表单的 submit 事件，而不是提交按钮的 click 事件，我们可以确保浏览器原生的HTML5验证机制正常工作。这种方法不仅解决了验证失效的问题，也提供了一种更健壮、更符合Web标准的用户交互流程。遵循这些最佳实践，可以构建出更加稳定和用户友好的Web表单。

以上就是优化表单提交体验：如何在添加加载动画时保留HTML5验证功能的详细内容，更多请关注php中文网其它相关文章！