Telerik Forums / 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 709 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Oleg Yaroshevych
Top achievements
Rank 1
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

Sort by
0
Princy
Top achievements
Rank 2
answered on 11 Dec 2008, 06:50 AM
Hi Oleg,

One suggestion to achieve this is adding RequiredFieldValidator on page. Using this you can show a warning and stop the submission of the form if a required field has no value. Set the ControltoValidate property of RequiredFieldValidator to ID of RadDatePicker, which is RadDatePicker1. Please go through the following link to online demo.
Validation

Thanks,
Princy.
0
Oleg Yaroshevych
Top achievements
Rank 1
answered on 11 Dec 2008, 09:40 AM
Princy,

This is helpful for required form fields, but what should I do for fields that can be empty?

Actually I am creating controls in my CompositeControl-derived class, depending on custom business objects, and some date controls should allow entering empty values. This also means that I cannot use hardcoded javascript.

Thanks, Oleg.
0
Oleg Yaroshevych
Top achievements
Rank 1
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.
0
LDSK
Top achievements
Rank 1
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">
  
    <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>

0
Arash
Top achievements
Rank 1
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
Tags
Calendar
Asked by
Oleg Yaroshevych
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Oleg Yaroshevych
Top achievements
Rank 1
LDSK
Top achievements
Rank 1
Arash
Top achievements
Rank 1
Share this question
or