RadDatePicker: how to prevent postback on validation error?

6 posts, 0 answers
  1. Oleg Yaroshevych
    Oleg Yaroshevych avatar
    21 posts
    Member since:
    Nov 2007

    Posted 10 Dec 2008 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Dec 2008 Link to this post

    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.
  3. Oleg Yaroshevych
    Oleg Yaroshevych avatar
    21 posts
    Member since:
    Nov 2007

    Posted 11 Dec 2008 Link to this post

    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.
  4. Oleg Yaroshevych
    Oleg Yaroshevych avatar
    21 posts
    Member since:
    Nov 2007

    Posted 11 Dec 2008 Link to this post

    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.
  5. LDSK
    LDSK avatar
    1 posts
    Member since:
    Nov 2010

    Posted 09 Nov 2010 Link to this post

    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>

  6. Arash
    Arash avatar
    9 posts
    Member since:
    Jul 2010

    Posted 23 Dec 2010 Link to this post

    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
Back to Top