How to disable other controls when particular input fails a RadInput RegEx or Validation Setting?

2 posts, 0 answers
  1. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 20 Mar 2011 Link to this post

    Hello,
    I'm having an issue with the input validations available in the RadInputManager where I need to prevent the user from entering data in other form fields when there is an error in a particular form input field due to the nature of the application.  I have code that will disable the input controls, but I cannot find a way to determine is control X is valid.

    What I really need is a client side method to determine if the input field is valid or not in my scenario, but cannot seem to find a way to accomplish that using the OnValidating event.  In my scenario, I need to dynamically add input validation settings via the page's codebehind (e.g. not through clientside script) and cannot allow the user to add data to other fields while one field is invalid.

    1. User enters invalid text in TextBox1
    2. Validation message appears
    3. All other input controls other than Textbox1 should be disabled
    4. When the user enters a valid value in Textbox1 that passes the validation then all the other input boxes should be re-enabled (Note: This is the step I cannot determine how to accomplish)

    In the code below if the line RegExSetting.ClientEvents.OnValidating = "OnClientValidating" is commented out then the user can enter values in any textbox or input field, which is not desired while Textbox1 has an invalid value.

    If there was a way to tell if Control X was valid when the control loses focus that would solve the problem (in my actual scenario 100% of the controls are dynamic so I cannot hardcode control names) as I could execute code that re-enables all the controls if Control X is valid.

    ASPX:
    <telerik:RadAjaxManager ID="AjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Area">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Area" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
                    <telerik:AjaxUpdatedControl ControlID="Button1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
     
            <telerik:AjaxSetting AjaxControlID="RadInputManager1"
                <UpdatedControls
                    <telerik:AjaxUpdatedControl ControlID="Area" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                </UpdatedControls>  
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="2000">
    </telerik:RadAjaxLoadingPanel>
     
    <telerik:RadCodeBlock ID="CodeBlock" runat="server">
     
     <script type="text/javascript" language="javascript">
         function OnClientValidating(sender, args) {
                var inputId = args.get_input().get_id();
                if (inputId != null)
                {
                    var inputs = document.getElementsByTagName('input');
                    for (element in inputs)
                    {
                        inputs[element].disabled = true;
                    }
                    document.getElementById(inputId).disabled = false;
                }
         }
     
         function OnClientBlur(sender, args) {
             //How do I tell if the input is valid, e.g. passed RadInputManager validation setting, OnBlur or another clientside event?
         }
                 
    </script>
    </telerik:RadCodeBlock>
     
    <div>
     
                   <asp:Panel ID="Area" runat="server">
                            <asp:PlaceHolder Runat="server" ID="DynamicControls"></asp:PlaceHolder>
                        </asp:Panel>   
     
        <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>

    Code-Behind (VB.NET)
        Private inputManager As New RadInputManager()
     
        Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
            LoadDynamicControls()
            LoadDynamicValidation()
        End Sub
     
        Private Sub LoadDynamicControls()
            Dim txtBox As TextBox = New TextBox()
            txtBox.ID = "TextBox1"
            txtBox.AutoPostBack = True
            txtBox.CausesValidation = True
            DynamicControls.Controls.Add(txtBox)
     
            Dim txtBox2 As TextBox = New TextBox()
            txtBox2.ID = "TextBox2"
            txtBox2.AutoPostBack = True
            txtBox2.CausesValidation = True
            DynamicControls.Controls.Add(txtBox2)
        End Sub
     
        Private Sub LoadDynamicValidation()
     
            Dim RegExPattern As String = "\d{2}/\d{4}"
            Dim RegExSetting As RegExpTextBoxSetting = New RegExpTextBoxSetting
     
            RegExSetting.ValidationExpression = RegExPattern
            RegExSetting.ErrorMessage = "Test error message"
     
            Dim mngr As RadInputManager = inputManager
            mngr.ID = "RadInputManager1"
     
            
     
            RegExSetting.TargetControls.Add(New TargetInput("TextBox1", True))
            RegExSetting.ClientEvents.OnValidating = "OnClientValidating"
            mngr.InputSettings.Add(RegExSetting)
            Page.Form.Controls.Add(mngr)
     
            'RadInputManager1.InputSettings.Add(RegExSetting)
     
      
        End Sub
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim control As TextBox = FindControl("TextBox1")
            AjaxManager1.AjaxSettings.AddAjaxSetting(control, control, RadAjaxLoadingPanel1)
            AjaxManager1.AjaxSettings.AddAjaxSetting(Button1, control, RadAjaxLoadingPanel1)
            AjaxManager1.AjaxSettings.AddAjaxSetting(inputManager, control, RadAjaxLoadingPanel1)
        End Sub
    End Class
  2. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 20 Mar 2011 Link to this post

    I was almost able to get this to work, but there seems to be an error/strange behavior in TextBox3 which has a date validation on it.  The following code works with RegEx and Numeric Input Validation Settings, but it is not working with dates.  There is a strange behavior where if you set both a minimum and maximum date and the user enters a value outside of this range, it is still allowing the postback to occur.

      <telerik:RadAjaxManager ID="AjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Area">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Area" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
                    <telerik:AjaxUpdatedControl ControlID="Button1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
     
            <telerik:AjaxSetting AjaxControlID="RadInputManager1"
                <UpdatedControls
                    <telerik:AjaxUpdatedControl ControlID="Area" LoadingPanelID="RadAjaxLoadingPanel1" /> 
                </UpdatedControls>  
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" MinDisplayTime="2000">
    </telerik:RadAjaxLoadingPanel>
     
    <telerik:RadCodeBlock ID="CodeBlock" runat="server">
     
     <script type="text/javascript" language="javascript">
         var lastValidatedControlId;
         function OnClientValidating(sender, args) {
                var inputId = args.get_input().get_id();
                if (inputId != null) {
                        var disableOtherControls = false;
                        var disableCurrentControl = false;
     
                        //NOTE: This is not working to validate DateInputSettings on a textbox or RadDatePickers
                        //EXAMPLE: If a minimum date of 1/1/2011 and a max date of 1/5/2011 (Jan. 5) is set for a DateInputSetting, if the user enters
                        //1/20/2011 as a date it is allowing the postback to continue.
                        if ((args.get_isValid() == true && lastValidatedControlId == inputId) || (document.getElementById(inputId).className == args._input._owner._invalidCss)) {
                            disableOtherControls = true;
     
                            var inputs = document.getElementsByTagName('input');
                            for (element in inputs) {
                                inputs[element].disabled = disableOtherControls;
                            }
     
                            document.getElementById(inputId).disabled = disableCurrentControl;
                        }
     
     
                        lastValidatedControlId = inputId;
                    }
            }
                 
    </script>
    </telerik:RadCodeBlock>
     
    <div>
     
                   <asp:Panel ID="Area" runat="server">
                            <asp:PlaceHolder Runat="server" ID="DynamicControls"></asp:PlaceHolder>
                        </asp:Panel>   
     
        <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>

    Code-behind (VB.NET):
    Private inputManager As New RadInputManager()
     
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        LoadDynamicControls()
        LoadDynamicValidation()
    End Sub
     
    Private Sub LoadDynamicControls()
        Dim txtBox As TextBox = New TextBox()
        txtBox.ID = "TextBox1"
        txtBox.AutoPostBack = True
        txtBox.CausesValidation = True
        DynamicControls.Controls.Add(txtBox)
     
        Dim txtBox2 As TextBox = New TextBox()
        txtBox2.ID = "TextBox2"
        txtBox2.AutoPostBack = True
        txtBox2.CausesValidation = True
        DynamicControls.Controls.Add(txtBox2)
     
        Dim txtBox3 As TextBox = New TextBox()
        txtBox3.ID = "TextBox3"
        txtBox3.AutoPostBack = True
        txtBox3.CausesValidation = True
        DynamicControls.Controls.Add(txtBox3)
    End Sub
     
    Private Sub LoadDynamicValidation()
     
        Dim RegExPattern As String = "\d{2}/\d{4}"
        Dim RegExSetting As RegExpTextBoxSetting = New RegExpTextBoxSetting
     
        RegExSetting.ValidationExpression = RegExPattern
        RegExSetting.ErrorMessage = "Test error message"
     
        Dim mngr As RadInputManager = inputManager
        mngr.ID = "RadInputManager1"
     
        
     
        RegExSetting.TargetControls.Add(New TargetInput("TextBox1", True))
        RegExSetting.ClientEvents.OnValidating = "OnClientValidating"
        mngr.InputSettings.Add(RegExSetting)
     
        Dim NumericSetting As NumericTextBoxSetting = New NumericTextBoxSetting
        NumericSetting.Type = NumericType.Number
        NumericSetting.ClientEvents.OnValidating = "OnClientValidating"
        NumericSetting.ErrorMessage = "Test error message 2"
        NumericSetting.MinValue = 0
        NumericSetting.MaxValue = 5
        NumericSetting.TargetControls.Add(New TargetInput("TextBox2", True))
     
        mngr.InputSettings.Add(NumericSetting)
     
     
        Dim DateSetting As DateInputSetting = New DateInputSetting
        DateSetting.MinDate = New DateTime(2011, 1, 1)
        DateSetting.MaxDate = New DateTime(2011, 1, 5)
        DateSetting.ClientEvents.OnValidating = "OnClientValidating"
        DateSetting.TargetControls.Add(New TargetInput("TextBox3", True))
     
        mngr.InputSettings.Add(DateSetting)
     
        Page.Form.Controls.Add(mngr)
     
        'RadInputManager1.InputSettings.Add(RegExSetting)
     
     
    End Sub
     
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim control As TextBox = FindControlRecursive("TextBox1")
        AjaxManager1.AjaxSettings.AddAjaxSetting(control, control, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(Button1, control, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(inputManager, control, RadAjaxLoadingPanel1)
     
        Dim control2 As TextBox = FindControlRecursive("TextBox2")
        AjaxManager1.AjaxSettings.AddAjaxSetting(control2, control2, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(Button1, control2, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(inputManager, control2, RadAjaxLoadingPanel1)
     
        Dim control3 As TextBox = FindControlRecursive("TextBox3")
        AjaxManager1.AjaxSettings.AddAjaxSetting(control3, control3, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(Button1, control3, RadAjaxLoadingPanel1)
        AjaxManager1.AjaxSettings.AddAjaxSetting(inputManager, control3, RadAjaxLoadingPanel1)
    End Sub

    Protected Overridable Function FindControlRecursive(ByVal id As String) As Control
            Return FindControlRecursive(id, Me)
        End Function
     
        Protected Overridable Function FindControlRecursive(ByVal id As String, ByVal parent As Control) As Control
            ' If parent is the control we're looking for, return it
            If String.Compare(parent.ID, id, True) = 0 Then
                Return parent
            End If
     
            ' Search through children
            For Each child As Control In parent.Controls
                Dim match As Control = FindControlRecursive(id, child)
     
                If match IsNot Nothing Then
                    Return match
                End If
            Next
     
            ' If we reach here then no control with id was found
            Return Nothing
        End Function

Back to Top