本文讲解如何在 jquery 中实现表单提交前的空值校验，并仅在所有必填字段有效时才启动按钮加载动画（spinner），避免无效点击触发 loading 状态。
本文讲解如何在 jquery 中实现表单提交前的空值校验，并仅在所有必填字段有效时才启动按钮加载动画（spinner），避免无效点击触发 loading 状态。
在 Web 表单交互中，为提升用户体验，常在提交按钮上添加加载 Spinner（如 Bootstrap 的 spinner-border）来提示用户“正在处理”。但若未做前置校验，用户点击空表单时 Spinner 仍会启动，造成误导——既未真正提交，又阻塞了按钮操作。关键在于：必须将表单验证逻辑置于 Spinner 启动之前，并阻止默认提交行为，由 JavaScript 显式控制提交时机。
以下是一个健壮、可复用的解决方案：
✅ 正确实现步骤
- 阻止默认提交行为：使用 e.preventDefault() 防止浏览器自动提交（否则 Spinner 尚未渲染页面已跳转）；
- 遍历并校验必填字段：使用 $("#item_form input").each() 检查每个 <input> 的 .val() 是否为空字符串；
- 条件执行提交流程：仅当所有字段非空时，才更新按钮 HTML、禁用按钮并手动调用 submit()；
- 注意作用域与选择器：确保选择器精准匹配目标表单（如 #item_form）和按钮（如 #btnFetch），避免误操作其他元素。
? 完整示例代码
<!-- 表单结构（精简版，含 CSRF Token） -->
<form action="{{ route('upload-item') }}" class="setting_form" id="item_form" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div id="display_message"></div>
<div class="row">
<div class="col-sm-6 mb-1" id="pricebox_left">
<label class="font-weight-medium" for="regular_price">价格</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">{{ $allsettings->site_currency }}</span>
</div>
<input type="text" id="regular_price" name="regular_price" class="form-control" required>
</div>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit" id="btnFetch">
<i class="dwg-cloud-upload font-size-lg mr-2"></i>Submit
</button>
</form><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btnFetch").click(function(e) {
e.preventDefault(); // ⚠️ 关键：阻止默认提交，获得控制权
let hasEmptyField = false;
// 遍历表单内所有 input 元素（可根据需要扩展为 select、textarea）
$("#item_form input").each(function() {
// 跳过隐藏域、按钮等非用户输入字段（可选增强）
if ($(this).is(':hidden') || $(this).attr('type') === 'submit') return;
if ($.trim($(this).val()) === '') { // 使用 $.trim() 去除首尾空格再判断
hasEmptyField = true;
return false; // break 循环
}
});
// ✅ 仅当无空字段时，启动加载状态并提交
if (!hasEmptyField) {
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 提交中...`
).prop("disabled", true); // 同时禁用按钮，防重复点击
// 手动触发表单原生 submit（不触发 jQuery submit 事件，避免循环）
$("#item_form")[0].submit();
}
// ❌ 若有空字段，不作任何 UI 变更，保持按钮可用，便于用户修正
});
});
</script>⚠️ 注意事项与最佳实践
- 校验范围建议：上述代码检查所有 <input>，生产环境推荐结合 required 属性或自定义 data-validate 标记，只校验真正必填字段，提升性能与语义性；
- 空格处理：使用 $.trim() 避免用户仅输入空格导致校验通过；
- 用户体验优化：可配合 focus() 定位首个空字段，或在 #display_message 中显示友好提示（如 "请填写所有必填项"）；
- 服务端兜底：前端校验仅为体验优化，务必在后端再次验证，防止绕过 JS 提交恶意请求；
- 兼容性：本方案兼容 jQuery 3.x+，若使用原生 JS，可用 form.checkValidity() 配合 event.preventDefault() 实现更简洁逻辑。
通过以上实现，按钮 Spinner 将严格遵循业务规则——有据可依地启动，真正反映提交流程的有效性，兼顾健壮性与专业体验。
