New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How to Display ErrorMessage inside RadTextBox


The example below explains how you can show an error message directly in the input of a RadTextBox after unsuccessful validation.


The code comments in the snippet explain how you can override the built-in validation method of the framework to execute additional logic - in this case, to change the appearance and contents of the textbox. If you want to keep the standard validation messages as well, remove the Style attribute from the validators.

<script type="text/javascript">
    //note, requires:
    // <appSettings>
    //     <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
    if (ValidatorUpdateDisplay && typeof (ValidatorUpdateDisplayOriginal) === "undefined") {
        ValidatorUpdateDisplayOriginal = ValidatorUpdateDisplay;
        ValidatorUpdateDisplay = function (val) {
            var control = $find(val.controltovalidate);
            if ((!val.isvalid) && control && control.set_invalid) {
                //make it show in error state with empty message
                //optionally, change the empty message to the one from the validator control
                //the next time it gets focus, remove the empty message that will otherwise remain
                control.__shouldClearOnNextFocus = true;

    function ClearAfterValidation(sender, args) {
        if (sender.__shouldClearOnNextFocus) {
            sender.__shouldClearOnNextFocus = false;
<telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" EmptyMessage="Enter username" ClientEvents-OnFocus="ClearAfterValidation">
<telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox2" runat="server" EmptyMessage="Enter password"  ClientEvents-OnFocus="ClearAfterValidation">
<asp:Button ID="Button1" runat="server" Text="PostBack" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Text="username is required" ControlToValidate="RadTextBox1"
    Style="display: none;"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Text="password is required" ControlToValidate="RadTextBox2"
    Style="display: none;"></asp:RequiredFieldValidator>


This approach relies on overriding methods from the framework and Telerik does not guarantee it can work and will not cause side effects.

Also, the overriden method is part of the "standard" WebForms validation mechanism, so Unobtrusive Validation (the default since .NET 4.5) must be stopped:

  <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
In this article