RadDatePicker: how to prevent postback on validation error? in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

RadDatePicker: how to prevent postback on validation error?

5 Answers 494 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

Oleg Yaroshevych asked on 10 Dec 2008, 07:12 PM

Hello,

In the RadDatePicker control I've set MaxDate/MinDate and ValidationGroup, but I am still able to submit form with invalid date.

Using following example I am able to submit form with "AA" text or "1/1/2020" date in the RadDatePicker. I've tried solution with raddatepicker validation but it doesn't work when user presses Enter - form is submitted.

Please check my example.

    
            <%@ Page Language="C#" AutoEventWireup="true" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
              <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
              <script runat="server"> 
        
                protected void Button1_Click(object sender, EventArgs e) 
        
                { 
        
                  Title = "ok"; 
        
                } 
        
              </script> 
        
              <form id="form1" runat="server"> 
        
              <telerik:RadScriptManager runat="server"> 
        
              </telerik:RadScriptManager> 
        
              <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MaxDate="2010-12-31"> 
        
                <DateInput runat="server" InvalidStyleDuration="100" ValidationGroup="Test"> 
        
                </DateInput> 
        
              </telerik:RadDatePicker> 
        
              <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" ValidationGroup="Test" /> 
        
              </form> 
        
            </body> 
        
            </html>

My configuration:

VS 2008
Telerik For ASP.NET AJAX (Telerik.Web.UI.dll Version=2008.1.619.35)
IE 7.0
Firefox 3.0

Best regards, Oleg.

5 Answers, 1 is accepted

answered on 11 Dec 2008, 03:30 PM

Hi Everyone,

I've found a solution for this problem, it prevents the postback on validation errors. Key point here is CustomValidator with javascript code.

I hope, it may help someone. Please refer to my sample for details.

    
            <%@ Page Language="C#" AutoEventWireup="true" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
              <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
              <form id="form1" runat="server"> 
        
              <script runat="server"> 
        
                protected void Button1_Click(object sender, EventArgs e) 
        
                { 
        
                  Title = "ok"; 
        
                } 
        
              </script> 
        
              <script type="text/javascript"> 
        
                // This array will contain "suspicious" date pickers - controls that might be in invalid state. 
        
                // We don't need to track date pickers that newer fired Error event. 
        
                var suspiciousDatePickers = new Array(); 
        
                // Each date picker that fires an error will be stored in suspiciousDatePickers array. 
        
                function OnRadDatePickerError(sender, args) 
        
                { 
        
                  try 
        
                  { 
        
                    if (suspiciousDatePickers != null) 
        
                      suspiciousDatePickers[sender.ClientID] = sender; 
        
                  } 
        
                  catch (ex) 
        
                  { 
        
                    alert(ex); 
        
                  } 
        
                } 
        
                // Checks if any date picker is in invalid state. 
        
                // We have to check these controls here because no event fired when 
        
                // date picker changes its state to valid. 
        
                function ValidateRadDatePickers(sender, args)  
        
                {  
        
                  try 
        
                  { 
        
                    if (suspiciousDatePickers != null) 
        
                      for (var i in suspiciousDatePickers) 
        
                        if (i != null && suspiciousDatePickers[i] != null) 
        
                        { 
        
                          var datePicker = suspiciousDatePickers[i]; 
        
                          if (datePicker.GetDate() == null && datePicker.GetTextBoxValue() != "") 
        
                          { 
        
                            // Date picker contains text that cannot be represented as date, 
        
                            // or date exceeds min/max date. 
        
                            args.IsValid = false; 
        
                            break; 
        
                          } 
        
                        } 
        
                  } 
        
                  catch (ex) 
        
                  { 
        
                    alert(ex); 
        
                  } 
        
                } 
        
              </script> 
        
              <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
              </telerik:RadScriptManager> 
        
              <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MaxDate="2010-12-31"> 
        
                <DateInput runat="server" InvalidStyleDuration="100" ValidationGroup="Test"> 
        
                  <ClientEvents OnError="OnRadDatePickerError" /> 
        
                </DateInput> 
        
              </telerik:RadDatePicker> 
        
              <telerik:RadDatePicker ID="RadDatePicker2" runat="server" MaxDate="2010-12-31"> 
        
                <DateInput ID="DateInput1" runat="server" InvalidStyleDuration="100" ValidationGroup="Test"> 
        
                  <ClientEvents OnError="OnRadDatePickerError" /> 
        
                </DateInput> 
        
              </telerik:RadDatePicker> 
        
              <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" 
        
                ClientValidationFunction="ValidateRadDatePickers" ValidationGroup="Test">Please correct errors to continue.</asp:CustomValidator> 
        
              <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" ValidationGroup="Test" /> 
        
              </form> 
        
            </body> 
        
            </html>

Best regards, Oleg Yaroshevych.

answered on 09 Nov 2010, 09:57 PM

Hi there, Thank you for posting the solution. It solved my problem. However i am trying to take this one step further to use jQuery to apply this validation to all my controls in one go.

I am having difficulty in achieving that. If this is not the correct place for posting this , please do let me know.
I have tried numerous ways, the problem is i do not know how to set the ClientEvents onError function to the one of the js functions.

Here is my markup, can some one please help? I have many date fields on the same forms , so want to avoid tieing every RadDatePicker to the onError event.

<%@ Page Language="vb" AutoEventWireup="false" >

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

<script type="text/javascript" src="Resources/Scripts/jquery.js"></script>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="SM" runat="server"></asp:ScriptManager>

<div id="dateBirthDate" class="error"></div>

<telerik:RadDatePicker runat="server" ID="rdpBirthDate" DateInput-ValidationGroup="EditGroup">

<DateInput ID = "dIrdpBirthDate" runat="server"></DateInput>

<ClientEvents />

</telerik:RadDatePicker>

<div id="dateWeddingDate" class="error"></div>

<telerik:RadDatePicker runat="server" ID="rdpWeddingDate" DateInput-ValidationGroup="EditGroup">

<DateInput ID = "dIrdpWeddingDate" runat="server" ClientEvents-OnError="OnRadDatePickerError"></DateInput>

<ClientEvents/>

</telerik:RadDatePicker>

<asp:Button ID="btnSubmit" runat="server" text="Submit" ValidationGroup="EditGroup"/>

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator"

ClientValidationFunction="ValidateRadDatePickers" ValidationGroup="EditGroup">Please correct errors to continue.</asp:CustomValidator>

<script type="text/javascript">

$(document).ready(function()

{

$("dIrdpWeddingDate > ClientEvents").OnError = "OnRadDatePickerError";

}

);

</script>

<script type="text/javascript">

// This array will contain "suspicious" date pickers - controls that might be in invalid state.

// We don't need to track date pickers that newer fired Error event.

var suspiciousDatePickers = new Array();

// Each date picker that fires an error will be stored in suspiciousDatePickers array.

function OnRadDatePickerError(sender, args)

{

try

{

if (suspiciousDatePickers != null)

suspiciousDatePickers[sender.ClientID] = sender;

}

catch (ex)

{

alert(ex);

}

// Checks if any date picker is in invalid state.

// We have to check these controls here because no event fired when

// date picker changes its state to valid.

function ValidateRadDatePickers(sender, args)

{

try

{

if (suspiciousDatePickers != null)

for (var i in suspiciousDatePickers)

if (i != null && suspiciousDatePickers[i] != null)

{

var datePicker = suspiciousDatePickers[i];

if (datePicker.GetDate() == null && datePicker.GetTextBoxValue() != "")

{

// Date picker contains text that cannot be represented as date,

// or date exceeds min/max date.

args.IsValid = false;

break;

}

catch (ex)

{

alert(ex);

}

</script>

</form>

</body>

</html>

answered on 23 Dec 2010, 04:25 PM

Hi
First thing that i need to know is that how can I have my own topic???

Second thing is that I have a radgrid view which is in "Template" EditFormType.As you know for having an update button

at this edit form type we have to have a button like this:

<asp:ImageButton ID="ImageButton1" runat="server" CommandName="Update" ImageUrl="images/eip_save.gif"
ValidationGroup="grp" TabIndex="17" OnClientClick="checkno()"></asp:ImageButton>

What i need is that if the OnClientClick event returned False value the serverside event of the ImageButton (which is a member of the radgrid)
must not be fired.

thanks