Use server side and client side validation simultaneously on a single form in C#

Question

I have a form (in aspx page) where I am using server side validations (validation controls) and jQuery validations on the same form.

On Textboxes I am using server side validations and on submit button I am using jQuery validation.

I having problem in using both together.

Form:-

<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 Code:-

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();
                  }
                }
              }

I have also tried below jQuery functions but these stops server side validations.

            $("#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();
                  }
                }
              });

This as well:-

<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;
              }

I know that but what should I return then, should I always return false;.... — Neha Thakur, Nov 25 '16 at 05:52
You should return true only when jquery validation passes, anytime you return false means jquery validation failed so no need to run code behind. Is this what you are trying to accomplish? — Junior John, Nov 25 '16 at 05:54

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

If you need to use both OnClick and OnClientClick together with the same button then add a return true or false to OnClientClick function. Please check this link example

edited May 23 '17 at 11:55

Community

1
1

answered Nov 25 '16 at 05:41

Junior John

145
10

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

you need to change CheckDateTimes method to return bool value, then you can change JS method call as OnClientClick="return CheckDateTimes();" if this return true only it will call server side. if you need to call server side validation always then return true from the javascript method.

check Asp .NET Button - OnClientClick="return function()" vs OnClientClick="function()"

edited May 23 '17 at 10:32

Community

1
1

answered Nov 25 '16 at 05:37

Damith

62,401
13
102
153

I already have tried this but it stops server side validations as well. – Neha Thakur Nov 25 '16 at 05:38
if you need both validations at ones, at the end of JS function return `true` – Damith Nov 25 '16 at 05:41

Use server side and client side validation simultaneously on a single form in C#

2 Answers2