求助：JS验证+iframe提交表单后，页面显示感谢消息的实现

看起来你已经用JavaScript做了表单验证，也通过iframe把提交结果发到同一页面，但就是没法显示感谢消息对吧？这大概率是因为表单提交到iframe后，主页面没有触发显示消息的逻辑——毕竟iframe是独立的页面环境，提交完成后主页面不会自动刷新或执行显示代码。

我给你梳理一下修改方案，分两步来：

1. 完善HTML结构 #

首先确保你的表单、iframe和感谢消息的结构是这样的（把你现有字段对应上就行）：

<form id="rentalForm" onsubmit="return SubmitRentalForm();" target="formFrame">
  <input type="text" id="fname" name="fname" placeholder="First Name">
  <!-- 你的第二个字段，比如姓 -->
  <input type="text" id="lname" name="lname" placeholder="Last Name">
  <button type="submit">Submit</button>
</form>
<!-- 隐藏的iframe，用来接收表单提交结果 -->
<iframe name="formFrame" id="formFrame" style="display: none;"></iframe>
<!-- 初始隐藏的感谢消息 -->
<div id="thankYouMsg" style="display: none; margin-top: 1rem; color: green;">
  Thank you for your submission
</div>

这里要注意form标签的target属性必须和iframe的name一致，这样表单才会提交到这个iframe里。

2. 修改JavaScript验证函数 #

你的SubmitRentalForm函数需要在验证通过后，监听iframe的加载完成事件——当iframe加载完提交后的响应，就说明表单提交成功了，这时再显示感谢消息：

function SubmitRentalForm() {
  var bValid = true;
  var sFirst = document.getElementById("fname").value.trim();
  // 假设你的第二个字段id是lname，根据实际修改
  var sLast = document.getElementById("lname").value.trim();

  // 这里补充你的验证逻辑，比如检查字段是否为空
  if (!sFirst) {
    bValid = false;
    alert("Please enter your first name");
  } else if (!sLast) {
    bValid = false;
    alert("Please enter your last name");
  }

  // 如果验证通过，监听iframe的load事件
  if (bValid) {
    var formFrame = document.getElementById("formFrame");
    // 每次提交都重新绑定load事件，避免多次提交时失效
    formFrame.onload = function() {
      // 显示感谢消息
      document.getElementById("thankYouMsg").style.display = "block";
    };
  }

  // 返回true允许表单提交，false阻止提交
  return bValid;
}

关键原因说明 #

之前没法显示消息，是因为表单提交到iframe后，主页面没有感知到提交完成的动作。通过监听iframe的load事件，我们就能在表单提交成功（iframe加载完响应）时，主动触发显示感谢消息的代码。

另外要注意：如果你的表单提交后，iframe的响应页面是空白或者没有变化，这个load事件依然会触发，因为提交动作会让iframe重新加载内容。如果需要更严谨的判断，可以在iframe的响应页面里添加一段JS，主动通知主页面提交成功，但上面的方案已经能解决大部分场景的需求啦。

内容的提问来源于stack exchange，提问作者Kath W.