优化提交体验：确保HTML5 required 属性与加载动画协同工作

在现代web应用中，为了提升用户体验，我们常常在表单提交时为提交按钮添加加载动画（loading spinner），以指示操作正在进行中并防止重复提交。然而，一个常见的陷阱是，当加载动画的逻辑与html5内置的表单验证机制（如 required 属性）结合时，可能会出现验证失效的问题。

问题描述：click 事件与HTML5验证的冲突

当开发者将加载动画的逻辑绑定到提交按钮的 click 事件上时，可能会无意中绕过浏览器对HTML5 required 属性的默认验证。这是因为 click 事件在浏览器执行其内置表单验证之前触发。如果在 click 事件处理函数中立即禁用按钮并以编程方式提交表单，浏览器将不会有机会执行其标准的验证流程。

考虑以下示例代码，它展示了这种不当的实现方式：

<form method="post" action="" id="save">     
  <input class="input" name="passwort" type="password" placeholder="在此输入密码" required />
  <button type="submit" class="btn btn-lg btn-primary" id="load"> 保存 </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> 正在加载`
          );
          $("#save").submit(); // 以编程方式提交表单，绕过HTML5验证
      });
  });
</script>

在这段代码中，当用户点击“保存”按钮时，#load 按钮的 click 事件立即触发。事件处理函数会禁用按钮、添加加载动画，并随后通过 $("#save").submit() 手动触发表单提交。由于这个提交是程序性的，浏览器不会在此时执行其默认的HTML5验证，导致即便 passwort 字段为空，表单也会尝试提交。

解决方案：利用表单的 submit 事件

解决此问题的关键在于理解浏览器表单提交的生命周期。HTML5的 required 属性验证是在表单的 submit 事件被触发 之前 执行的。只有当所有 required 字段都已填写，并且其他内置验证（如 type="email"）通过后，浏览器才会允许 submit 事件发生。

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

度加剪辑

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

63

查看详情

因此，正确的做法是将加载动画的逻辑绑定到表单的 submit 事件上，而不是按钮的 click 事件。这样，只有在表单通过了所有HTML5内置验证后，加载动画才会显示，从而保证了验证机制的正常工作。

以下是修正后的代码示例：

<form method="post" action="" id="save">     
  <input class="input" name="passwort" type="password" placeholder="在此输入密码" required />
  <button type="submit" class="btn btn-lg btn-primary" id="load"> 保存 </button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $("#save").submit(function(e) { // 监听表单的提交事件
         // 只有当HTML5验证通过后，此事件才会被触发
         // 禁用按钮
         $('#load').prop("disabled", true);
         // 添加加载动画
         $('#load').html(
            `<i class="spinner-border spinner-border-sm mb-1"></i> 正在加载`
         );
         // 如果是AJAX提交，需要调用 e.preventDefault() 阻止默认表单提交行为
         // e.preventDefault();
         // 然后执行您的AJAX请求
      });
  });
</script>

在这个修正后的实现中：

1. 用户尝试提交表单时，浏览器会首先检查所有带有 required 属性的字段。
2. 如果存在未填写的 required 字段，浏览器将阻止表单提交，并显示相应的验证提示，#save 的 submit 事件将不会触发。
3. 只有当所有HTML5验证都通过后，#save 表单的 submit 事件才会触发。此时，我们可以在事件处理函数中安全地禁用提交按钮并显示加载动画，因为我们知道数据至少已经通过了客户端的基本验证。

注意事项与最佳实践

• AJAX 提交的处理: 如果您的表单是通过 AJAX 提交数据而不是传统的页面跳转提交，您需要在 submit 事件处理函数内部调用 e.preventDefault() 来阻止表单的默认提交行为，然后执行您的 AJAX 请求。在 AJAX 请求成功或失败后，您可能需要恢复按钮状态或显示其他反馈信息。
• 用户体验: 即使使用了HTML5验证，也应考虑为用户提供清晰的验证失败反馈。浏览器默认的提示可能不够美观或不符合设计要求，可以通过CSS定制或使用JavaScript库来增强验证提示。
• 服务器端验证: 客户端的HTML5验证仅仅是第一道防线，绝不能替代服务器端的验证。所有提交到服务器的数据都必须经过严格的服务器端验证，以确保数据完整性和安全性。
• 恢复按钮状态: 在某些情况下（例如，AJAX请求失败），您可能需要将提交按钮恢复到初始状态（启用并移除加载动画），以便用户可以再次尝试提交。

总结

通过将加载动画的逻辑从提交按钮的 click 事件转移到表单的 submit 事件，我们能够确保HTML5内置的表单验证机制正常工作，从而在提供良好用户体验（加载动画）的同时，维护了数据输入的完整性。这种做法遵循了Web表单处理的最佳实践，使得客户端验证更加健壮可靠。

以上就是优化提交体验：确保HTML5 required 属性与加载动画协同工作的详细内容，更多请关注php中文网其它相关文章！