在 ASP.NET 中的验证器后显示弹出窗口答案

【问题标题】：Show popup after validator in ASP.NET在 ASP.NET 中的验证器后显示弹出窗口
【发布时间】：2018-02-28 16:49:07
【问题描述】：

我想在用户注册时显示弹出窗口。

我使用的代码运行良好：

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <p>PROCESSING</p>
  </div>
</div>
<script>
  // Get the modal
  var modal = document.getElementById('myModal');

  // Get the button that opens the modal
  var btn = document.getElementById("btnLogin");

  // When the user clicks the button, open the modal 
  btn.onclick = function() {
    modal.style.display = "block";
  }
</script>

文本框：

<asp:TextBox ID="tbMail" runat="server" BorderStyle="Solid" Height="60px" Width="300px" placeholder="Mail Address" Font-Names="SF Pro Text" Font-Size="14pt" TextMode="Email" ValidateRequestMode="Enabled" BorderColor="#CCCCCC" BorderWidth="2px"></asp:TextBox>

但是，我使用TextMode="Email" 和ValidateRequestMode="Enabled"，所以它是一种检查语法的验证器。

当我使用它时，弹出窗口和错误消息会同时显示如下：

我只想在验证器正常（语法等）时显示弹出窗口

【问题讨论】：

当表单已经无效时，为什么要让他们到达处理框出现的地步？在客户端显示处理框之前，请确保表单有效。
@Dylan 你好，你在吗？我的问题已经是这样了。

标签： javascript c# asp.net html

【解决方案1】：

将显示弹出窗口的代码放在表单的onsubmit 中，而不是按钮的onclick 中。这样，只有在您通过所有验证并且表单准备好提交时才会显示您的弹出窗口：

document.getElementById("myForm").onsubmit = function() {
  document.getElementById('myModal').style.display = "block";
  return false; //This line is for demo. Remove it once you're done testing.
}

.modal {
  display: none;
  border: 1px solid red;
}

<form id="myForm">
  <input id="tbMail" type="email" placeholder="Mail Address" ValidateRequestMode="Enabled" />
  <input id="btnLogin" type="submit" value="Send" />
</form>

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <p>PROCESSING</p>
  </div>
</div>

注意：我添加了return false; 是为了防止表单提交，这样你就可以看到弹出窗口，否则会太快。删除该行，让表单继续提交。

【讨论】：