HTML与JavaScript实现点击按钮前先执行表单必填项验证，再设置按钮加载状态的需求及问题解决

我明白你的痛点了——现在按钮一点击就直接进入加载状态并提交表单，完全没做必填项检查，导致空数据也能传到PHP页面。咱们调整下代码逻辑，把必填项验证放在最前面，只有验证通过后才触发加载状态和表单提交：

修改后的完整代码 #

$(document).ready(function() {
  $("#btnFetch").click(function(event) {
    // 先阻止表单默认提交行为，由我们手动控制提交时机
    event.preventDefault();
    
    // 1. 获取需要验证的输入框值（替换成你的实际输入框ID）
    const requiredInput = $("#yourRequiredInput").val().trim();
    
    // 2. 执行必填项验证
    if (!requiredInput) {
      // 验证失败：提示用户，终止后续操作
      alert("请填写必填项！"); // 可以换成更友好的页面内提示（比如输入框下方显示错误文字）
      return;
    }
    
    // 3. 验证通过：设置按钮加载状态
    $(this).prop("disabled", true);
    $(this).html('<i class="fa fa-circle-o-notch fa-spin"></i> loading...');
    
    // 4. 手动提交表单（替换成你的实际表单ID）
    $("#yourForm").submit();
  });
});

关键逻辑说明 #

• event.preventDefault()：阻止按钮默认的表单提交行为，这样我们可以先完成验证，再决定是否提交。
• trim()处理输入值：去除输入内容的前后空格，避免用户只输入空格就通过验证的情况。
• 验证失败直接return：一旦必填项为空，立刻终止函数执行，不会走到加载状态和表单提交步骤。
• 手动提交表单：因为我们阻止了默认提交，所以验证通过后需要手动调用submit()来触发表单提交到PHP页面。

如果你用AJAX异步提交（而非表单跳转） #

如果你的按钮是通过AJAX提交数据，不需要页面跳转，可以把最后一步的表单提交换成AJAX请求，同时记得在请求失败时恢复按钮状态，方便用户重试：

// 验证通过后发起AJAX请求
$.ajax({
  url: "your-php-api.php",
  method: "POST",
  data: { inputData: requiredInput },
  success: function(response) {
    // 请求成功后的处理逻辑（比如显示提交结果）
    console.log("提交成功：", response);
  },
  error: function() {
    // 请求失败：恢复按钮状态
    $("#btnFetch").prop("disabled", false);
    $("#btnFetch").html("重新提交");
  }
});

记得把代码里的#yourRequiredInput、#yourForm和PHP文件路径替换成你项目里的实际值哦！

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