在现代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验证之后（且验证通过时）才触发。
修改后的示例代码：
<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 事件，我们确保了以下流程：
- 用户点击提交按钮。
- 浏览器执行HTML5表单验证。
- 如果所有 required 字段都已填写且其他验证规则通过，浏览器允许表单提交。
- 此时，$("#save").submit() 事件被触发。
- 在 submit 事件处理函数中，我们禁用按钮并显示加载指示器。
- 表单继续其默认的提交行为（例如，向 action 指定的URL发送数据）。
这样，HTML5的 required 属性就能正常工作，只有在所有必填字段都填写完毕后，加载指示器才会出现，表单才会真正提交。
注意事项与最佳实践
- 始终优先监听 submit 事件：对于任何需要在表单提交前或提交时执行的逻辑（如显示加载状态、执行额外验证、数据预处理等），都应该绑定到表单的 submit 事件上。
- 防止重复提交：在 submit 事件中禁用提交按钮是一个很好的实践，可以有效防止用户在等待响应期间多次点击按钮，导致重复提交数据。
- 恢复按钮状态：如果表单是通过 AJAX 提交的，务必在 AJAX 请求成功或失败的回调函数中恢复按钮的原始状态（启用按钮，移除加载指示器，恢复按钮文本），以便用户可以进行后续操作或重试。
- 服务器端验证不可或缺：尽管HTML5和JavaScript提供了客户端验证，但它们只能提升用户体验。出于安全和数据完整性考虑，服务器端验证是必不可少的，客户端验证可以被绕过。
- 用户反馈：除了加载指示器，考虑提供其他形式的用户反馈，例如提交成功或失败的消息提示。
总结
正确处理Web表单提交时的加载状态与HTML5验证是提升用户体验和确保数据完整性的关键。通过将加载指示器的逻辑绑定到表单的 submit 事件，而不是提交按钮的 click 事件，我们可以确保浏览器原生的HTML5验证机制正常工作。这种方法不仅解决了验证失效的问题，也提供了一种更健壮、更符合Web标准的用户交互流程。遵循这些最佳实践，可以构建出更加稳定和用户友好的Web表单。
