Loading ...

Change the color of the Textbox | CodeAsp.Net

Change the color of the Textbox

 /5
0 (0votes)

Change the color of the userinput fileld if it is blank(empty).

Example:

first we apply RequiredField Validation and CustomValidator to validate the user input of check the empty control if any user input control is empty then we use javascript to change the color ogf the user input control.

following is the javascript code to change the color of the input control.

 <script language="javascript" type="text/javascript">
    function changeColor(source, args)
        {
            var txtuser = document.getElementById('<%= txtUserName.ClientID %>');
            if(args.Value.length == 0)
            {
                txtuser.style.background = '#F7F6F3';
                args.IsValid = false;
            }
            else
            {
                txtuser.style.background = '#ffffff';
                args.IsValid = true;
            }
        }
       
    </script>


<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
          <asp:RequiredFieldValidator ID="RFV1″ runat="server" ControlToValidate="txtUserName"
            ErrorMessage="User name is required."></asp:RequiredFieldValidator>
            <asp:CustomValidator ID="CustomValidator1″ runat="server"
             ClientValidationFunction="changeColor″ ControlToValidate="txtUserName" ValidateEmptyText='true'
             ErrorMessage="CustomValidator1" Display="None"></asp:CustomValidator>

 we also change the color of textbox (user input control) in following way.

<asp:TextBox style="border: 2px solid #F7F6F3″
onkeyup="if(this.value==")this.style.backgroundColor='#9e49a1′;else
this.style.backgroundColor='#ffffff';" Text="User Input" />

Hope it helps….

 

Comments (1)

   
alhowail
Dear Sir , how can i use for multiple text box my html code is like :

please help me with this issue .i have 4 text box and i want to validate please how can i change in javascript
<script type="text/javascript">
        function changeColor(source, args) {
            var txtuser = document.getElementById('<%= txtUserName.ClientID %>';
            if (args.Value.length == 0) {
                txtuser.style.background = '#F7F6F3';
                args.IsValid = false;
            }
            else {
                txtuser.style.background = '#ffffff';
                args.IsValid = true;
            }
        }
      
    </script>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
        ErrorMessage="RequiredFieldValidator" ControlToValidate="txtUserName">
        </asp:RequiredFieldValidator>
        <asp:CustomValidator ID="CustomValidator1" runat="server"
        ErrorMessage="CustomValidator" ClientValidationFunction="changeColor" ControlToValidate="txtUserName" ValidateEmptyText='true'
              Display="None"></asp:CustomValidator>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
5/29/2012
 · 
by

Top Posts