防止回發並使用jQuery運行OnClick

Question

我正在嘗試驗證TextBox並單擊asp.net的按鈕。

<asp:TextBox ID="txtEmail" Placeholder="E-mail" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" />

這是一個jQuery代碼，它驗證TextBox然后觸發OnClick方法：

var al = document.getElementById('<%=lblAlert.ClientID%>');
var email = document.getElementById('<%=txtEmail.ClientID%>');
var msg = null;
$(document).ready(function () {
  $('#<%=btnLogin.ClientID%>').on('click', function (e) {
      if (email.innerText == '') {
          msg = 'Please! enter email address.';
          al.innerText = msg;
      }
      else {
          $('#<%=btnLogin.ClientID%>').click();
      }
  });
});

編輯：

OnClick方法是：

protected void btnLogin_Click(object sender, EventArgs e)
{
  // some code
}

Answer 1

您應該在需要時使用event.preventDefault()取消click事件。

$(document).ready(function () {
  $('#<%=btnLogin.ClientID%>').on('click', function (e) {
      if (email.innerText == '') {
          msg = 'Please! enter email address.';
          al.innerText = msg;
          e.preventDefault();
      }
  });
});

如果驗證成功，則無需再次調用click。

Answer 2

由於在HTML中，調用jquery時已經單擊了您的按鈕，因此您的

  else {
      $('#<%=btnLogin.ClientID%>').click();
  }

是多余的。

這就是問題，如果您要驗證然后單擊，則應使用其他元素作為按鈕

如果要使用相同的按鈕（推薦），則必須通過返回false來防止驗證失敗時回發。

簡單的HTML概念

    <asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" OnClientClick="return false;" />

永遠不會造成回發

這是我會做的

<asp:TextBox ID="txtEmail" Placeholder="E-mail" runat="server"></asp:TextBox>
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" Text="Login" OnClientClick="ValidateMe()" />
<script>
var al = document.getElementById('<%=lblAlert.ClientID%>');
var msg = null;
function ValidateMe() {
  var email = document.getElementById('<%=txtEmail.ClientID%>');
      if (email.innerText == '') {
          msg = 'Please! enter email address.';
          al.innerText = msg;
          return false;
      }
      else {
          return true;
      }
}
</script>