如何修复jQuery表单提交时输入为空仍触发Spinner的问题？

核心思路是：先做表单验证，只有验证通过后才启动Spinner并提交表单，而不是点击按钮就直接触发Spinner。

修改后的jQuery代码 #

$(document).ready(function() {
  $("#btnFetch").click(function(e) {
    // 阻止按钮默认提交行为，先做验证
    e.preventDefault();
    
    // 获取价格输入框的内容，去除首尾空格
    var regularPrice = $("#regular_price").val().trim();
    
    // 检查输入是否为空
    if (!regularPrice) {
      // 可选：给用户显示错误提示
      $("#display_message").html("<p style='color:red'>请填写价格</p>");
      return; // 不执行后续Spinner和提交逻辑
    }

    // 验证通过后，启动Spinner并提交表单
    $(this).html(
      `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
    );
    $(this).prop("disabled", true);
    // 提交表单
    $("#item_form").submit();
  });
});

关键改动说明 #

• 加入e.preventDefault()：阻止按钮默认的提交行为，让我们能先完成验证再决定是否提交。
• 增加输入检查逻辑：手动判断必填的价格输入框是否为空，为空则直接终止后续操作。
• 验证通过才执行Spinner切换：只有输入符合要求时，才会启动加载状态并提交表单。

另外注意你的HTML代码里，最后一个<form>标签应该改为</form>，修复DOM结构错误避免影响功能。

内容的提问来源于stack exchange，提问作者tartari