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

Setting RadTextBox updateCssClass() On Submit?

1 Answer 138 Views
Input
This is a migrated thread and some comments may be shown as answers.
Michael O'Flaherty
Top achievements
Rank 2
Michael O'Flaherty asked on 28 Mar 2012, 08:26 PM
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!

1 Answer, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 02 Apr 2012, 07:36 AM
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.
Tags
Input
Asked by
Michael O'Flaherty
Top achievements
Rank 2
Answers by
Vasil
Telerik team
Share this question
or