Setting RadTextBox updateCssClass() On Submit?

[Michael O'Flaherty]

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!

[Vasil]

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