Как вызвать функцию customvalidator и функцию проверки страницы в javascript on ASP.NET щелчок по кнопке?

---

Основной рабочий процесс страницы

Изображение платежной страницы

У меня есть платежная страница, которая имеет текстовое поле name (txtName), текстовое поле PIN (txtPin) и два текстовых поля (txtPaymentDate и txtPaymentTime), содержащих дату и время платежа соответственно. На странице также есть кнопка оплаты (btnPay). txtName имеет RequiredFieldValidator, который проверяет, является ли поле пустым. txtPin имеет CustomValidator, который проверяет, имеет ли поле шестизначное числовое значение. Третий CustomValidator гарантирует, что либо txtPaymentDate и txtPaymentTime являются чистыми, либо оба они выбраны одновременно. Только один из них не может быть выбран. Все эти проверки валидации должны быть на стороне клиента.

При нажатии кнопки btnPay он проверит на стороне клиента, выбраны ли txtPaymentDate и txtPaymentTime вместе. Если да, то значение txtPaymentDate должно быть между 01/01/1753 12:00:00 AM и 12/31/9999 11:59:59 PM. Если значение не укладывается в указанные даты, появится предупреждающее сообщение и нажмите кнопку событие отменено.

Если все вышеперечисленные проверки будут успешными, произойдет обратная передача btnPay и будет запущено серверное событие btnPay.

Именно этого я и хочу добиться в точном порядке при нажатии кнопки btnPay:
1) Все проверки элементов управления валидатора на стороне клиента будут иметь место. Если проверка какого-либо контроля валидатора на стороне клиента не удается, это остановит btnPay событие click. Также нет необходимости переходить к шагу 2.

2) при успешной проверке всех вышеперечисленных элементов управления валидатора клиентская проверка проверит, выбраны ли txtPaymentDate и txtPaymentTime, а также находится ли значение txtPaymentDate в указанном диапазоне. Если это условие не выполняется, btnPay событие click, тоже остановилась.

3) только в том случае, если вышеуказанные два шага будут успешными, произойдет обратная передача btnPay и будет запущено серверное событие btnPay.

Что на самом деле происходит при нажатии кнопки btnPay:
1) Ни одна из "клиентских" валидаций элементов управления валидатора не происходит вообще. Вместо этого происходит соответствующая "серверная" проверка элементов управления валидатора.

2) Как только Шаг 1 успешно проверен, проверка на стороне клиента, чтобы проверить, находится ли значение txtPaymentDate в пределах указанного диапазона, происходит успешно. Он также блокирует событие щелчка btnPay, если эта проверка не является истинной, что хорошо в соответствии с требованиями.

3) Если вышеуказанные две проверки успешны, то btnPay postback успешно запускает серверное событие btnPay, которое тоже нормально в соответствии с требованиями.

Шаг 1, выделенный курсивом выше, - это моя проблема. Когда я нажимаю кнопку btnPay, вместо выполнения функций "клиентской стороны" валидаторов выполняются соответствующие функции "серверной стороны" валидаторов. Я хочу, чтобы они выполнялись на стороне клиента. Однако, как ни удивительно, если я удалю OnClientClick="return Client_ValidatePage()" начиная с btnPay, все клиентские функции управления валидатором работают нормально. Похоже, что клиентские функции элементов управления валидатора сталкиваются с OnClientClick="return Client_ValidatePage()" из btnPay. Как я могу избавиться от этого?

Любая помощь по этому вопросу будет высоко оценена.

Используемая технология: Visual Studio 2017, Bootstrap 4.5.0 на Windows 7.

Не стесняйтесь спрашивать дальше, если мой пост вам не ясен.
С уважением

Что я уже пробовал:

страница ASPX:

<%@ Page Title="" Language="C#" MasterPageFile="~/User.master" AutoEventWireup="true" CodeFile="Payment.aspx.cs" Inherits="Payment" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript">
        // Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
        function Client_ValidatePin(source, arguments) {
            arguments.IsValid = /^[0-9]{6}$/.test(arguments.Value);
        }

        // Test if both txtPaymentDate and txtPaymentTime are selected or none of them at all.
        function Client_ValidatePaymentDateTime(source, arguments) {
            var paymentDate = document.getElementById("<%=txtPaymentDate.ClientID%>").value;
            var paymentTime = document.getElementById("<%=txtPaymentTime.ClientID%>").value;

            arguments.IsValid = (paymentDate.length == 0 && paymentTime.length == 0) || (paymentDate.length > 0 && paymentTime.length > 0);
        }

        function Client_ValidatePage() {
            // Test if payment date is less than 01/01/1753 12:00:00 AM or greater than 12/31/9999 11:59:59 PM.
            var paymentDate = document.getElementById("<%=txtPaymentDate.ClientID%>").value;
            var paymentTime = document.getElementById("<%=txtPaymentTime.ClientID%>").value;

            if (paymentDate.length > 0 && paymentTime.length > 0) {
                if (paymentDate < "1753-01-01" || paymentDate > "9999-12-31") {
                    alert('All dates should be between 01/01/1753 12:00:00 AM and 12/31/9999 11:59:59 PM');
                    return false;
                }
            }

            return true;
        }
    </script>
    <div id="divAlert" role="alert" runat="server">
    </div>
    <div class="row">
        <div class="col-md-9">
            <h4>Payment</h4>
            <hr />
            <div class="form-group row">
                <asp:Label ID="Label1" runat="server" class="col-md-2 col-form-label" Text="Name:"></asp:Label>
                <div class="col-md-7">
                    <asp:TextBox ID="txtName" class="form-control" runat="server" MaxLength="50"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" class="text-danger" ErrorMessage="Name is required!" ControlToValidate="txtName"></asp:RequiredFieldValidator>
                </div>
            </div>
            <div class="form-group row">
                <asp:Label ID="Label2" runat="server" class="col-md-2 col-form-label" Text="PIN:"></asp:Label>
                <div class="col-md-7">
                    <asp:TextBox ID="txtPin" class="form-control" runat="server" MaxLength="6"></asp:TextBox>
                    <asp:CustomValidator ID="PinValidator" runat="server" ControlToValidate="txtPin" ValidateEmptyText="true" ClientValidationFunction="Client_ValidatePin" OnServerValidate="PinValidator_ServerValidate" class="text-danger" Display="Static" ErrorMessage="A 6-digit number is required!"></asp:CustomValidator>
                </div>
            </div>
            <div class="form-group row">
                <asp:Label ID="Label3" runat="server" class="col-md-2 col-form-label" Text="Date/Time:"></asp:Label>
                <div class="col-md-7">
                    <div class="form-inline">
                        <asp:TextBox ID="txtPaymentDate" class="form-control" runat="server" TextMode="Date"></asp:TextBox>
                        <asp:TextBox ID="txtPaymentTime" class="form-control" runat="server" TextMode="Time"></asp:TextBox>
                    </div>
                    <asp:CustomValidator ID="PaymentDateTimeValidator" runat="server" ClientValidationFunction="Client_ValidatePaymentDateTime" OnServerValidate="PaymentDateTimeValidator_ServerValidate" class="text-danger" Display="Static" ErrorMessage="Both dates or none of them are required!"></asp:CustomValidator>
                </div>
            </div>
            <asp:Button ID="btnPay" runat="server" Text="Make Payment" OnClientClick="return Client_ValidatePage()" OnClick="btnPay_Click" />
        </div>
    </div>
</asp:Content>

С фоновым кодом:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Payment : System.Web.UI.Page
{
    private bool Server_ValidatePage()
    {
        // If both payment date and payment time are selected, then check if payment date is not a valid date.
        if (!String.IsNullOrEmpty(txtPaymentDate.Text) && !String.IsNullOrEmpty(txtPaymentTime.Text))
        {
            if (!Utilities.IsValidDateTime(txtPaymentDate.Text))
            {
                divAlert.Attributes["class"] = "alert alert-danger";
                divAlert.InnerText = "All dates should be between 01/01/1753 12:00:00 AM and 12/31/9999 11:59:59 PM.";
                return false;
            }
        }

        return true;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            divAlert.InnerText = string.Empty;
            divAlert.Attributes["class"] = "d-none";
        }
    }

    protected void PinValidator_ServerValidate(object source, ServerValidateEventArgs args)
    {
        try
        {
            // Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
            args.IsValid = System.Text.RegularExpressions.Regex.IsMatch(args.Value, "^[0-9]{6}$");
        }

        catch (Exception ex)
        {
            args.IsValid = false;
        }
    }

    protected void PaymentDateTimeValidator_ServerValidate(object source, ServerValidateEventArgs args)
    {
        try
        {
            // Test if both txtPaymentDate and txtPaymentTime are selected or none of them at all.
            args.IsValid = (txtPaymentDate.Text.Length == 0 && txtPaymentTime.Text.Length == 0) || (txtPaymentDate.Text.Length > 0 && txtPaymentTime.Text.Length > 0);
        }
        catch (Exception ex)
        {
            args.IsValid = false;
        }
    }

    protected void btnPay_Click(object sender, EventArgs e)
    {
        if (Page.IsValid && Server_ValidatePage())
        {
            // Write code for payment.

            // If payment is successful...
            divAlert.Attributes["class"] = "alert alert-success";
            divAlert.InnerText = "Payment completed successfully.";
        }
    }
}

---