Using OnServerClick with "required" field

Question

I'm building an asp.net web application. In the login page, the username and password text boxes are required and I get a really nice message when the user tries to validate without filling both the boxes, as shown below:

But when I add an onserverclick event handler to the submit button, this functionality no longer works - nothing happens if the user validates with empty text boxes. Here is the code for the login form.

<fieldset>
  <%--Input--%>
    <div class="form-group">
      <label for="UsernameTextBox" class="col-lg-2 control-label text-right">Username</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" placeholder="username" required id="UsernameTextBox" runat="server">
      </div>
    </div>

    <div class="form-group">
      <label for="PasswordTextBox" class="col-lg-2 control-label text-right">Password</label>
      <div class="col-lg-10">
        <input type="password" class="form-control" placeholder="password" required id="PasswordTextBox" runat="server">
      </div>
    </div>

    <%--Buttons--%>
      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
          <button type="submit" class="btn btn-primary btn-lg" onserverclick="Login_Click" id="LoginBtn" runat="server"><i class="glyphicon glyphicon-ok"></i>
          </button>
          <button type="reset" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-repeat"></i>
          </button>
        </div>
      </div>
</fieldset>

Answer 1

I have just been trying this out. When I put a break point on the button server side function and click, I see it hit the break point, if I then click the button again the Required message comes up.

MSDN for onserverclick states "This event causes a round trip to occur from the client to the server and back. It is deliberately different from the client-side OnClick event."

https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx

The button gets setup with an onclick attribute which will be doing the postback and bypassing the browser required validation.

<button onclick="__doPostBack('ctl00$MainContent$btnSubmit','')" id="MainContent_btnSubmit"> Submit </button>

I found that if you use a standard asp:button then the required validation fires.

<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" />