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

[jgill]

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

[jgill]

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