This is a migrated thread and some comments may be shown as answers.

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

1 Answer 190 Views
Input
This is a migrated thread and some comments may be shown as answers.
jgill
Top achievements
Rank 1
jgill asked on 20 Mar 2011, 06:06 PM
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

1 Answer, 1 is accepted

Sort by
0
jgill
Top achievements
Rank 1
answered on 20 Mar 2011, 08:16 PM
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

Tags
Input
Asked by
jgill
Top achievements
Rank 1
Answers by
jgill
Top achievements
Rank 1
Share this question
or