如何用jQuery实现表单全字段填充后点击提交显示弹窗？

我的网站上有一个联系表单，希望用户点击提交按钮时，仅在所有输入字段均已填写的情况下显示弹窗。目前使用的jQuery代码存在问题：只要有一个输入框填写内容、其余为空时，弹窗也会被触发。请问如何修改代码，实现仅当全部字段填充完成后才显示弹窗？

原代码如下：

$('#send-request-btn').click(function() {
  $('.text-field-wrapper input').each(function() {
    if ($(this).val().length === 0) {
      // Do nothing
    } else {
      $(".form-popup-wrapper").css({
        display: 'flex',
        opacity: '1.0'
      });
      $("body").css("overflow", "hidden");
    }
  });
});

原代码逻辑完全倒置：遍历输入框时，只要遇到一个已填写的字段就直接触发弹窗，完全忽略了其他未填写的字段，这和需求完全相反。需要调整为：先确认所有字段都已填写，再执行弹窗逻辑。

修改代码逻辑，先校验所有输入字段是否都非空（包含去除首尾空格的严谨校验），只有全部通过才显示弹窗：

$('#send-request-btn').click(function() {
  // 初始化校验状态为通过
  let allFieldsFilled = true;
  
  // 遍历所有输入字段
  $('.text-field-wrapper input').each(function() {
    // 去除首尾空格后检查是否为空
    if ($.trim($(this).val()) === '') {
      allFieldsFilled = false;
      return false; // 跳出循环，无需继续检查
    }
  });
  
  // 所有字段都已填写时，显示弹窗
  if (allFieldsFilled) {
    $(".form-popup-wrapper").css({
      display: 'flex',
      opacity: '1.0'
    });
    $("body").css("overflow", "hidden");
  }
});

• 使用$.trim()可以避免用户仅输入空格就被判定为已填写的情况，提升校验严谨性；
• 一旦发现空字段，立即通过return false跳出each循环，减少不必要的遍历；
• 只有当allFieldsFilled保持为true（即所有字段都非空）时，才执行弹窗显示逻辑。

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