在现代web应用中，为了提升用户体验，我们常常在表单提交时为按钮添加加载动画（spinner），以明确告知用户操作正在进行中。然而，一个常见的陷阱是，这种交互改进可能会无意中破坏浏览器原生的html5表单验证功能，例如 required 属性的校验。
问题根源：事件监听的误区
问题的核心在于事件监听的时机。当我们将加载动画的逻辑绑定到提交按钮的 click 事件时，我们实际上在用户点击按钮后立即执行了自定义逻辑。如果在这个逻辑中，我们直接禁用了按钮并添加了加载动画，或者通过JavaScript强制提交了表单（如 $("#save").submit();），那么浏览器就没有机会执行其默认的HTML5表单验证流程。HTML5验证通常在用户尝试提交表单时，且在表单的 submit 事件触发之前进行。
考虑以下常见的错误实现：
在这个例子中，当用户点击 Save 按钮时，click 事件处理器会立即执行。它会禁用按钮，显示加载动画，并强制提交表单。由于 $("#save").submit(); 是通过JavaScript触发的，它会绕过浏览器对 required 属性等HTML5验证的检查，导致即使输入框为空，表单也会尝试提交。
解决方案：监听表单的 submit 事件
正确的做法是将加载动画的逻辑绑定到表单的 submit 事件。表单的 submit 事件有一个关键特性：它只会在所有HTML5表单验证（例如 required 属性、type 属性、pattern 属性等）都通过之后才会触发。如果任何验证失败，浏览器会显示相应的错误提示，并且 submit 事件将不会被触发，从而有效阻止表单提交。
立即学习“前端免费学习笔记（深入）”；
这意味着，当 submit 事件被触发时，我们可以确信表单数据至少在HTML5层面是有效的。此时，我们再禁用按钮并显示加载动画，既能保证用户体验，又能维护表单验证的完整性。
以下是修正后的实现方式：
在这个修正后的代码中，如果用户尝试提交表单但 passwort 输入框为空，浏览器会显示“请填写此字段”之类的提示，并且 $("#save").submit() 事件处理器不会被执行。只有当所有 required 字段都填写完毕，并且通过了其他HTML5验证后，submit 事件才会被触发，此时按钮才会被禁用并显示加载动画，表单也才会真正提交。
注意事项与最佳实践
事件监听对象： 始终将与表单提交相关的逻辑（如禁用按钮、显示加载动画）绑定到表单的 submit 事件，而不是按钮的 click 事件。
-
异步提交： 如果你的表单是通过 AJAX 异步提交的，你可能需要在 submit 事件处理器中调用 e.preventDefault(); 来阻止表单的默认提交行为，然后手动发起 AJAX 请求。在 AJAX 请求成功或失败后，别忘了恢复按钮状态（移除加载动画，重新启用按钮）。
$("#save").submit(function(e) { e.preventDefault(); // 阻止表单默认提交行为 $('#load').prop("disabled", true).html(` Loading`); // 模拟一个AJAX请求 $.ajax({ url: $(this).attr('action'), method: $(this).attr('method'), data: $(this).serialize(), // 序列化表单数据 success: function(response) { // 处理成功响应 console.log('提交成功:', response); // 恢复按钮状态或重定向 $('#load').prop("disabled", false).text('Save'); // 或者根据需要处理成功后的UI }, error: function(xhr, status, error) { // 处理错误 console.error('提交失败:', error); // 恢复按钮状态并显示错误信息 $('#load').prop("disabled", false).text('Save'); alert('提交失败，请重试。'); } }); }); 用户反馈： 除了加载动画，还可以考虑在提交成功或失败时提供额外的视觉或文字反馈，进一步提升用户体验。
可访问性： 确保加载状态对屏幕阅读器用户也是可访问的。例如，可以使用 aria-live 区域来宣布状态变化。
总结
正确处理提交按钮的加载动画与HTML5表单验证的兼容性，是构建健壮且用户友好的Web表单的关键。通过将加载动画的逻辑绑定到表单的 submit 事件，我们能够充分利用浏览器原生的验证机制，确保数据完整性，同时为用户提供清晰的交互反馈。这种实践不仅简化了代码，也提升了整体的用户体验和应用的可靠性。
