[Solved] Button click event not working in jQuery with SignalR in ASP.Net

Hello friends,

I am experiencing a minor issue. The button click doesn't work.

Could you help, please? 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="../Scripts/jquery-3.6.0.min.js"></script>
    <script src="../Scripts/jquery.mobile-1.4.5.min.js"></script>
    <script src="../Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script src="../Scripts/dist/browser/signalr.js"></script>
    <script src="../Scripts/dist/browser/signalr.min.js"></script>
    <script src="../signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var chatHub = $.connection.chatHub;
            $.connection.hub.logging = true;
            $.connection.hub.start().done(function () {
                Validate(chatHub);
            });
        });

        function Validate(chatHub) {
            $("[ID*=BtnCreateProfile]").click(function () {

                if (document.getElementById("<%=txtUsername.ClientID%>").value === '') {
                    alert("Username field is empty.");
                    document.getElementById("<%=txtUsername.ClientID%>").focus();
                    return false;
                }
                else if (document.getElementById("<%=txtEmail.ClientID%>").value === '') {
                    alert("Please provide Email Address.");
                    document.getElementById("<%=txtEmail.ClientID%>").focus();
                    return false;
                }
                else {
                    var name = $("[ID*=txtUsername]").val();
                    var email = $("[ID*=txtEmail]").val();
                    chatHub.server.connect(name, email);
                    alert("Done!");
                    return;
                }
            });
        }
    </script>
    <div class="container-fluid" style="height: 400px;">
        <asp:Panel ID="Panel1" runat="server" DefaultButton="BtnCreateProfile">
            <asp:TextBox ID="txtUsername" runat="server" Style="z-index: 1; position: absolute; top: 10px;" ></asp:TextBox>
            <asp:TextBox ID="txtEmail" runat="server" Style="z-index: 1; position: absolute; top: 50px;" ></asp:TextBox>
            <asp:Button ID="BtnCreateProfile" runat="server" Style="z-index: 1; position: absolute; top: 100px;" Text="Register" OnClick="BtnCreateProfile_Click" />
        </asp:Panel>
    </div>