Make the RadDatePicker behave like a Required RegEx text box through the Input Manager?

5 posts, 0 answers
  1. Kevin
    Kevin avatar
    30 posts
    Member since:
    Sep 2012

    Posted 04 Mar 2010 Link to this post

    I really like how the RegEx Text Boxes behave when their validation is required.  If I load my page and just click submit right away every RegEx box I have on the form that is required pops up the little exclaimation point, displays my error message, and won't let them use submit until they put something into each required field that satisfies the Regular Expression.

    I would like my various date boxes to do the same... right now the user can fill in all required RegEx text boxes and click submit and the page will let them, despite having blank required date fields.  I know I could write some little Javascript function, or use the ASP.Net field validators, but I'd rather keep everything consistent and use the Telerik-style validations if possible.

    So is there a way I can make the DatePicker require some input and if the user leaves the filed blank and clicks away, or tries to submit the form with nothing in the required Date Picker field, then have it display the exclaimation icon inside the DatePicker field and stop the submission?
  3. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 05 Mar 2010 Link to this post

    Hello Kevin,

    RadInputManager cannot work with RadInput textboxes or RadDateTimePickers, because they use a hidden textbox to store their real (unformatted) value and RadInputManager can't "know" that. However, you can use the following approach:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
    <script runat="server">
      
        protected void Page_PreRender(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                if (RadDatePicker1.SelectedDate == null)
                {
                    RadDatePicker1.DateInput.EnabledStyle.CssClass = "riError";
                    RadDatePicker1.DateInput.HoveredStyle.CssClass = "riError";
                    RadDatePicker1.DateInput.FocusedStyle.CssClass = "riError";
                }
                else
                {
                    RadDatePicker1.DateInput.EnabledStyle.CssClass = "";
                    RadDatePicker1.DateInput.HoveredStyle.CssClass = "";
                    RadDatePicker1.DateInput.FocusedStyle.CssClass = "";
                }
            }
        }
          
    </script>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
      
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" />
      
    <asp:CustomValidator ID="CustomValidator1" runat="server" EnableClientScript="true" ValidateEmptyText="true"
        ControlToValidate="RadDatePicker1" ClientValidationFunction="validatePicker" />
      
    <asp:Button ID="Button1" runat="server" Text="PostBack" />
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
      
    function validatePicker(sender, args)
    {
        var picker = $find("<%= RadDatePicker1.ClientID %>");
        if (!picker.get_selectedDate())
        {
            picker.get_dateInput()._invalid = true;
            picker.get_dateInput().updateCssClass();
            args.IsValid = false;
        }
        else
        {
            picker.get_dateInput()._invalid = false;
            picker.get_dateInput().updateCssClass();
            args.IsValid = true;
        }
    }
     
    </script>
    </telerik:RadCodeBlock>
      
    </form>
    </body>
    </html>


    Kind regards,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Kevin
    Kevin avatar
    30 posts
    Member since:
    Sep 2012

    Posted 08 Mar 2010 Link to this post

    That worked great.  Thank you for your example.
  7. Kevin
    Kevin avatar
    30 posts
    Member since:
    Sep 2012

    Posted 19 Mar 2010 Link to this post

    I am trying to do the same thing now with a RadComboBox and I am not having much luck. 

    Do you have an example snippet of code that will make the RadComboBox display the riError class if a blank dropdown option is selected?
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 24 Mar 2010 Link to this post

    Hello Kevin,

    The RadComboBox has no integrated validation and hence no equivalent to the "riError" style. You can create your custom CSS style for it and apply it with jQuery.

    $telerik.$($get("RadComboBox1")).addClass("rcError");

    I hope this helps.

    Kind regards,
    Tsvetomir Tsonev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top