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

Question

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

我使用的代码效果很好：

<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"，所以它是一种检查语法的验证器。

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

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

Answer 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;以防止表单提交，因此您可以看到弹出窗口，否则会太快。删除该行以使表单继续提交。