在现代web应用中，为了提升用户体验，我们经常在表单提交时为提交按钮添加加载（loading）动画，以明确告知用户后台操作正在进行。然而，一个常见的问题是，当采用某些实现方式时，这种加载动画的添加可能会意外地禁用html5原生表单验证（例如required属性）。本文将深入分析这一问题，并提供一个健壮的解决方案。
问题描述与根源分析
设想一个场景：你有一个包含必填字段的表单，并希望在用户点击提交按钮后，该按钮立即显示一个加载动画并禁用自身，以防止重复提交。最初的实现可能如下所示：
初始（存在问题）的代码示例：
<form method="post" action="" id="save">
<input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input>
<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`
);
$("#save").submit(); // 手动提交表单
});
});
</script>在这种实现中，当用户点击ID为load的提交按钮时，JavaScript代码会立即执行：
- 禁用按钮。
- 为按钮添加加载动画。
- 通过$("#save").submit();手动触发表单提交。
问题的关键在于第三步。当JavaScript通过submit()方法程序化地提交表单时，浏览器会跳过HTML5的原生表单验证机制。这意味着，即使passwort输入框具有required属性且为空，浏览器也不会显示默认的“请填写此字段”提示，而是直接尝试提交表单，从而导致验证失效。
立即学习“前端免费学习笔记（深入）”；
解决方案：监听表单的submit事件
解决这个问题的核心在于，让浏览器有机会执行其原生的HTML5表单验证。只有当所有required字段都已填写，且其他HTML5验证规则（如type="email"）都通过时，表单才会真正尝试提交。此时，我们再介入并修改按钮状态。
正确的做法是监听表单的submit事件，而不是按钮的click事件。当用户点击type="submit"的按钮时，浏览器会首先进行HTML5验证。如果验证通过，submit事件就会被触发；如果验证失败，submit事件则不会被触发，并且浏览器会显示相应的验证错误提示。
优化后的代码示例：
<form method="post" action="" id="save">
<input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input>
<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() {
$("#save").submit(function(e) { // 监听表单的提交事件
// 当表单验证通过并尝试提交时，执行以下操作
// 禁用提交按钮
$('#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表单验证。
- 如果验证失败，浏览器显示错误提示，submit事件不触发，按钮状态不变。
- 如果验证成功，submit事件触发。
- submit事件处理器执行，禁用按钮并添加加载动画。
- 表单正常提交。
这样，HTML5的required属性就能正常工作，同时提交按钮也能在表单验证通过后显示加载动画。
注意事项与最佳实践
- 避免程序化提交： 除非有特殊需求，否则应尽量避免使用JavaScript的form.submit()方法来提交表单，因为它会绕过原生验证。
- 用户体验： 即使使用了加载动画，也要确保在AJAX请求失败时，按钮能够重新启用，并移除加载动画，以便用户可以再次尝试或修改输入。
- 防止重复提交： 禁用提交按钮是防止用户在等待响应期间多次点击提交的有效方法。结合加载动画，能更好地向用户传达“请稍候”的信息。
- 渐进增强： HTML5表单验证是前端验证的第一道防线。JavaScript可以用于更复杂的自定义验证或在原生验证通过后增强用户体验。
- CSS框架集成： 如果使用Bootstrap等CSS框架，其加载动画（如spinner-border）通常设计为易于集成到按钮中。
总结
在Web开发中，平衡用户体验与功能实现至关重要。为提交按钮添加加载动画是一个很好的实践，但必须注意其实现方式不能与HTML5的原生表单验证机制冲突。通过将事件监听从按钮的click事件转移到表单的submit事件，我们可以确保原生验证优先执行，从而实现加载动画和HTML5 required 属性的和谐共存，提供更健壮、更友好的用户界面。这种方法不仅解决了特定问题，也体现了Web表单处理中的一种最佳实践。
