Setting RadTextBox updateCssClass() On Submit?

2 posts, 0 answers
  1. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 28 Mar 2012 Link to this post

    Hi!

    I found a good article that allows us to programmatically set the invalid state on a text changed event (the code is reduced for brevity).
    function UsernameTextBoxValueChanged(sender, eventArgs) {
    if (trimSearchTerm(sender.get_value()) == "")
    sender._invalid = true;
    else
    sender._invalid = false;
    sender.updateCssClass();
    return false;
    }
    function PasswordTextBoxValueChanged(sender, eventArgs) {
    if (trimSearchTerm(sender.get_value()) == "")
    sender._invalid = true;
    else
    sender._invalid = false;
    sender.updateCssClass();
    return false;
    }
    <telerik:RadTextBox ID="radTextBoxUsername" runat="server" CssClass="inputBox" ClientEvents-OnKeyPress="OnKeyPress"
    MaxLength="16" ClientEvents-OnBlur="UsernameTextBoxValueChanged" SelectionOnFocus="SelectAll">
    <ClientEvents OnKeyPress="OnKeyPress" OnBlur="UsernameTextBoxValueChanged"></ClientEvents>
    <InvalidStyle CssClass="inputBoxInvalid" />
    </telerik:RadTextBox><br />
    <telerik:RadTextBox ID="radTextBoxPassword" runat="server" CssClass="inputBox" ClientEvents-OnKeyPress="OnKeyPress"
    MaxLength="16" ClientEvents-OnBlur="PasswordTextBoxValueChanged" SelectionOnFocus="SelectAll"
    TextMode="Password">
    <ClientEvents OnKeyPress="OnKeyPress" OnBlur="PasswordTextBoxValueChanged"></ClientEvents>
    <InvalidStyle CssClass="inputBoxInvalid" />
    </telerik:RadTextBox><br />

    The results of this code is shown in image 1. However, we do not want to validate until a submit button is clicked on a form. We did something like this (note--code is in flux):
    <form id="formLogon" runat="server" onsubmit="return validateForm();">
     
    function validateForm() {
                    var error = 0;
     
                    var userNameCtl = document.getElementById('<%= radTextBoxUsername.ClientID %>');
                    var passwordCtl = document.getElementById('<%= radTextBoxPassword.ClientID %>');
     
                    var userNameCtlRef = $find("<%= radTextBoxUsername.ClientID %>");
                    var passwordCtlRef = $find("<%= radTextBoxPassword.ClientID %>");
     
                    if (trimSearchTerm(passwordCtl.value) == "") {
                        passwordCtl._invalid = true;
                        error = 1;
                        //showErrorTip(passwordCtl, "Password is required");
     
                        //passwordCtl.style.background = '#F08080 !important';
                    }
                    else {
                        passwordCtl._invalid = false;
                        //passwordCtl.style.background = '#FFFFFF !important';
                    }
     
                    if (trimSearchTerm(userNameCtl.value) == "") {
                        userNameCtl._invalid = true;
                        error = 1;
                        //showErrorTip(userNameCtl, "Username is required");
     
                        //userNameCtl.style.background = '#F08080 !important';
                    }
                    else {
                        userNameCtl._invalid = false;
                        //userNameCtl.style.background = '#FFFFFF !important';
                    }
     
                    userNameCtlRef.updateCssClass();
                    passwordCtlRef.updateCssClass();
     
                    if (error == 1)
                        return false;
     
                    return true;
                }

    The results are shown in image #2. As you can tell from the second set of code, we were trying different ways to reference the controls, but we could never seem to get the controls to visually update. In the first scenario, the "sender" variable is passed in, so is something going on under the hood that allows the updateCssClass() method to work ??? Is this possible outside of a change text event?

    Thanks!
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 02 Apr 2012 Link to this post

    Hello Michael,

    In your code the "passwordCtl.value" is actually null every time so you don't invalidate the TextBox. You can use the get_value() of the client object to get the value.

    Here is a working example:
    <form id="form1" runat="server" onsubmit="return validateForm();">
    <telerik:RadScriptManager runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">
      
      function validateForm()
      {
        var textBox = $find("<%=RadTextBox1.ClientID %>");
        if (textBox.get_value() == "")
        {
          textBox._invalid = true;
          textBox.updateCssClass();
          return false;
        }
      }
      
    </script>
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <asp:Button runat="server" Text="PostBack" />

    I hope this helps.

    Greetings,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top