Home > ASP.Net, Javascript > Change TextBox Clor if it is Empty

Change TextBox Clor if it is Empty


try these examples to Change Color of Textbox if it is empty

First Example:

<script language="javascript" type="text/javascript">
    function check1(source, args)
            var txt = document.getElementById('<%= txt_Name.ClientID %>');
            if(args.Value.length == 0)
                txt.style.background = '#f1f4fb';
                args.IsValid = false;
                txt.style.background = '#ffffff';
                args.IsValid = true;

<asp:TextBox ID="txt_Name" runat="server" BorderStyle="Dotted" BorderColor="#C0C0FF" Width="204px"></asp:TextBox>&nbsp;<br />
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt_Name"
                            ErrorMessage="Your name is required." Font-Size="9pt"></asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="CustomValidator1" runat="server"
                                ClientValidationFunction="check1" ControlToValidate="txt_Name" ValidateEmptyText='true'
                                ErrorMessage="CustomValidator" Font-Size="9pt" Display="None"></asp:CustomValidator>

Second Example:

<script type="text/javascript">
function DoClick(txtId) {
    var textbox = document.getElementById(txtId);
    if (textbox.value == "") {
        textbox.style.backgroundColor = '#ff0000';
    } else {
        textbox.style.backgroundColor = '#ffffff';
<asp:TextBox runat="server" ID="txtTextBox" Text="Type Here" />
<asp:Button runat="server" ID="btnButton" Text="Click Me" />

in code behind:

protected void Page_Load(object sender, Eventargs e)
    btnButton.OnClientClick = "DoClick('" + txtTextBox.ClientID + "')";

Third Example:

<asp:TextBox style="border: 1px solid #7F9DB9" onkeyup="if(this.value=='')this.style.backgroundColor='#ff0000';else this.style.backgroundColor='#ffffff';" Text="Type Here" />

Hope it helps….

Good Luck

Categories: ASP.Net, Javascript Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: