在C＃中的单个表单上同时使用服务器端和客户端验证

Question

我有一个表单（在ASPX页面），其中我正在使用服务器端验证（验证控件）和jQuery验证。

在文本框上，我正在使用服务器端验证，在提交按钮上，我正在使用jQuery验证。

我一起使用两者都有问题。

表格： -

<form id="form1" runat="server">
<label>Start Date: </label>                                         
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" ControlToValidate="txtstartDate" ForeColor="Red" Text="*" ValidationGroup="onSave" runat="server" ErrorMessage="Enter start date...!!"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control mytxtCalendar" placeholder="Start Date.."></asp:TextBox>
<label> End Date:</label>                                           
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtEndDate" ForeColor="Red" Text="*" ValidationGroup="onSave" runat="server" ErrorMessage="Enter end date...!!"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtEndDate" runat="server" CssClass="form-control mytxtCalendar" placeholder="End Date.."></asp:TextBox>
<asp:Button ID="btnSaveShift" CssClass="btn btn-default" runat="server" Text="Save" ValidationGroup="onSave" OnClick="btnSaveShift_Click" OnClientClick="CheckDateTimes();" />
<asp:ValidationSummary ID="vlsAdd" ValidationGroup="onSave" ForeColor="Red" ShowMessageBox="true" ShowSummary="false" runat="server" />
</form>

jQuery代码： -

function CheckDateTimes() {
            var Frm_Date = $("#<%=txtStartDate.ClientID %>").val();
            var To_Date = $("#<%=txtEndDate.ClientID %>").val();    
            if (Frm_Date.length > 0 && To_Date.length > 0) {
                if (parseDate(Frm_Date) > parseDate(To_Date)) {
                    alert('Start date can not be greater than to date...!!');
                    $("#<%=txtStartDate.ClientID %>").focus();
                  }
                }
              }

我还尝试了下面的jQuery函数，但是这些停止服务器端验证。

            $("#btnSaveShift").click(function(evt){
            var Frm_Date = $("#<%=txtStartDate.ClientID %>").val();
            var To_Date = $("#<%=txtEndDate.ClientID %>").val();    
            if (Frm_Date.length > 0 && To_Date.length > 0) {
                if (parseDate(Frm_Date) > parseDate(To_Date)) {
                    alert('Start date can not be greater than to date...!!');
                    $("#<%=txtStartDate.ClientID %>").focus();
                    evt.preventDefault();
                  }
                }
              });

也： -

<asp:Button ID="btnSaveShift" CssClass="btn btn-default" runat="server" Text="Save" ValidationGroup="onSave" OnClick="btnSaveShift_Click" OnClientClick="return CheckDateTimes();" />
            function CheckDateTimes() {
            var Frm_Date = $("#<%=txtStartDate.ClientID %>").val();
            var To_Date = $("#<%=txtEndDate.ClientID %>").val();    
            if (Frm_Date.length > 0 && To_Date.length > 0) {
                if (parseDate(Frm_Date) > parseDate(To_Date)) {
                    alert('Start date can not be greater than to date...!!');
                    $("#<%=txtStartDate.ClientID %>").focus();
                    return false;
                  }
                }
                return true;
              }

Answer 1

如果您需要将OnClick和OnClientClick与相同的按钮一起使用，请添加返回true或false true或false true true或false inclientClick函数。请检查此链接示例

Answer 2

您需要更改checkDateTimes方法返回bool值，然后您可以将JS方法调用为OnClientClick="return CheckDateTimes();"，如果此返回true只有它会调用服务器端。如果您需要始终调用服务器端验证，请从JavaScript方法返回true。

检查ASP .NET按钮-ONCLIENTCLICK =＆quot; return函数（）＆quot;vs onclientClick =＆quot; function（）