HTML5表单验证与加载状态提交按钮的正确集成

引言：加载状态按钮与表单验证的挑战

在现代Web应用中，为了提升用户体验，我们常常会在用户点击提交按钮后，立即显示一个加载动画（Loading Spinner）并禁用按钮，以表明数据正在处理中。这避免了用户重复点击，并提供了即时反馈。然而，这种看似简单的优化，如果实现不当，可能会意外地绕过浏览器内置的HTML5表单验证机制，例如 required 属性，导致用户可以提交包含空必填字段的表单。

误区分析：为何点击事件会绕过验证？

问题的根源在于事件监听的选择。当开发者选择监听提交按钮的 click 事件，并在该事件处理函数中直接禁用按钮、显示加载动画，并立即通过JavaScript代码触发表单提交（例如 $("#save").submit()）时，就会出现验证绕过。

考虑以下常见的错误实现示例：

<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>

$(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(); 
    });
});

在这个示例中，当用户点击 id="load" 的按钮时，click 事件立即触发。JavaScript代码会禁用按钮并添加加载动画，然后强制执行 $("#save").submit()。此时，浏览器没有机会在表单真正提交前执行其内置的HTML5验证逻辑。因此，即使 passwort 输入框具有 required 属性且为空，表单也会被提交。

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

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

解决此问题的关键在于理解HTML5表单验证的触发时机。浏览器会在表单的 submit 事件被触发 之前 自动执行所有内置的HTML5验证（如 required、pattern、type 等）。只有当所有验证规则都通过后，submit 事件才会被真正触发。

因此，正确的做法是监听 表单 的 submit 事件，而不是按钮的 click 事件。这样可以确保在执行禁用按钮和显示加载动画的操作之前，HTML5验证已经完成。

以下是修正后的实现示例：

首先，确保你的页面中已引入jQuery库，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

然后，修改HTML结构（与之前相同，因为问题出在JavaScript逻辑）：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

<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>

最后，将JavaScript代码调整为监听表单的 submit 事件：

$(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`
       );
       // 表单将继续正常提交（页面刷新或通过action属性定义的行为）
    });
});

在这个修正后的代码中：

1. 用户点击 Save 按钮。
2. 浏览器首先检查表单中的所有HTML5验证规则（例如 passwort 字段是否已填写）。
3. 如果存在任何未通过验证的字段，浏览器会显示相应的提示信息，并且 submit 事件不会被触发。
4. 只有当所有字段都通过HTML5验证后，表单的 submit 事件才会被触发。
5. 此时，我们的JavaScript代码会执行，禁用按钮并显示加载动画。
6. 由于没有阻止默认行为（例如 e.preventDefault()），表单将继续其默认的提交流程（通常是向 action 属性指定的URL发送请求并刷新页面）。

通过这种方式，我们确保了HTML5表单验证机制得以充分发挥作用，同时仍然能够为用户提供友好的加载状态反馈。

注意事项与最佳实践

• 用户体验优先级： 始终将用户体验放在首位。在表单验证通过后立即显示加载状态，可以有效避免用户在等待期间的困惑或重复操作。

• 服务端验证不可或缺： 客户端HTML5验证是提升用户体验的第一道防线，但绝不能替代服务端的严格验证。恶意用户可以轻易绕过客户端验证，因此所有关键业务逻辑和数据完整性验证都必须在服务端进行。

• AJAX提交的考虑： 如果你的表单是通过AJAX进行异步提交，你需要在 submit 事件处理函数中调用 e.preventDefault() 来阻止表单的默认提交行为，然后手动发起AJAX请求。在AJAX请求成功或失败后，务必记得重新启用按钮并移除加载动画。

  $("#save").submit(function(e) {
      e.preventDefault(); // 阻止表单默认提交行为
      $('#load').prop("disabled", true);
      $('#load').html(`<i class="spinner-border spinner-border-sm mb-1"></i> Loading`);
  
      // 模拟AJAX请求
      $.ajax({
          url: $(this).attr('action'),
          type: $(this).attr('method'),
          data: $(this).serialize(),
          success: function(response) {
              // 处理成功响应
              console.log("提交成功:", response);
          },
          error: function(xhr, status, error) {
              // 处理错误
              console.error("提交失败:", error);
          },
          complete: function() {
              // 请求完成后，无论成功失败，都恢复按钮状态
              $('#load').prop("disabled", false);
              $('#load').html("Save"); // 恢复原始文本
          }
      });
  });

  登录后复制

• 加载状态的清除： 无论表单是正常提交导致页面跳转，还是通过AJAX异步提交，都应确保加载状态能够被正确清除，按钮恢复可用。对于页面跳转，浏览器会自动重置状态；对于AJAX，如上例所示，需要在 complete 回调中处理。

总结

正确处理HTML5表单验证与加载状态提交按钮的集成，是提升Web应用健壮性和用户体验的关键一环。通过将事件监听从按钮的 click 事件转移到表单的 submit 事件，我们能够充分利用浏览器内置的验证机制，确保数据在发送到服务器之前符合预设的客户端规则。这种方法不仅代码简洁，而且符合Web标准的最佳实践，值得在开发中广泛采用。

以上就是HTML5表单验证与加载状态提交按钮的正确集成的详细内容，更多请关注php中文网其它相关文章！