textbox border

umair mohsin

my application has a textbox a validation control and a button control.i want that if textbox is empty and button i clicked i know the validator would work

but i also want to set border color,style property to the textbox control.how can i do this.

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vaikesh K P11y ago
Hi,

Check these links :

1) http://www.aspdotnet-suresh.com/2011/01/how-to-change-textbox-background-color.html

2) https://stackoverflow.com/questions/196859/change-text-box-color-using-required-field-validator-no-extender-controls-pleas

3) http://www.c-sharpcorner.com/blogs/5182/change-textbox-color-on-validation-fail-in-asp-net.aspx

4) http://www.c-sharpcorner.com/Blogs/13925/change-background-and-border-color-of-invalid-controls-when.aspx
0
Munesh Sharma11y ago
http://www.c-sharpcorner.com/Blogs/13925/change-background-and-border-color-of-invalid-controls-when.aspx
0
Sandeep Kumar11y ago
Hello,

try this it will surely help you this code is done through jquery.just paste it in your document and you will able to see your result when you are connected to internet.
You can also pffline run this code by including jquery.min.js file .

0
Mohammed Ibrahim11y ago
hi Umair, this may help you http://csharp.net-informations.com/gui/cs-textbox.htm
0
Upendra Pratap Shahi11y ago
Your welcome umair mohsin ,

Kindly accept the answer , this help in better discussion.
0
umair mohsin11y ago
yes it is working thank you Mr:Upendra Pratap Shahi
0
Upendra Pratap Shahi11y ago
hello umair mohsin,

Kindly use this code-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>

DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>c# corner forumtitle>

<script type="text/javascript" language="javascript">

function validate() {

var txt = document.getElementById('<%= txtusername.ClientID %>');

var txt2 = document.getElementById('<%= txtpass.ClientID %>');

if (txt.value == "") {

txt.style.border = "1px solid Red";

return false;

}

if (txt2.value == "") {

txt2.style.border = "1px solid Red";

return false;

}

}

script>

head>

<body>

<form id="form1" runat="server">

<div style="width: 100%">

<div style="margin-bottom: 200px;">

div>

<div style="margin: 0px auto;">

<table width="100%">

<tbody>

<tr>

<td align="center">

<table border="0" width="400px">

<tbody>

<tr>

<td align="center">

<strong style="font-size: 18px;">User Loginstrong>

td>

tr>

<tr>

<td align="center">

<asp:TextBox ID="txtusername" Height="30px" Width="200px" runat="server">asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic" ValidationGroup="Submit" ControlToValidate="txtusername" ForeColor="Red" ErrorMessage="Enter UserName">asp:RequiredFieldValidator>

td>

tr>

<tr>

<td align="center">

<strong style="font-size: 18px;">Password strong>

td>

tr>

<tr>

<td align="center">

<asp:TextBox ID="txtpass" Height="30px" Width="200px" TextMode="Password" runat="server">asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="Dynamic" ValidationGroup="Submit" ControlToValidate="txtpass" ForeColor="Red" ErrorMessage="Enter Password">asp:RequiredFieldValidator>

td>

tr>

<tr>

<td align="center">

<asp:Button ID="Button1" runat="server" Text="Signin" OnClientClick="return validate();">asp:Button>td>

tr>

tbody>

table>

td>

tr>

tbody>

table>

div>

<div style="margin-top: 300px;">

div>

div>

form>

body>

html>
Kindly accept the answer.
0
Upendra Pratap Shahi11y ago
Hello umair mohsin,

Kindly use this code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>

DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>c# corner forumtitle>

<script type="text/javascript" language="javascript">

function validate() {

var txt = document.getElementById('<%= txtusername.ClientID %>');

var txt2 = document.getElementById('<%= txtpass.ClientID %>');

if (txt.value == "") {

txt.style.border = "1px solid Red";

return false;

}

if (txt2.value == "") {

txt2.style.border = "1px solid Red";

return false;

}

}

script>

head>

<body>

<form id="form1" runat="server">

<div style="width: 100%">

<div style="margin-bottom: 200px;">

div>

<div style="margin: 0px auto;">

<table width="100%">

<tbody>

<tr>

<td align="center">

<table border="0" width="400px">

<tbody>

<tr>

<td align="center">

<strong style="font-size: 18px;">User Loginstrong>

td>

tr>

<tr>

<td align="center">

<asp:TextBox ID="txtusername" Height="30px" Width="200px" runat="server">asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic" ValidationGroup="Submit" ControlToValidate="txtusername" ForeColor="Red" ErrorMessage="Enter UserName">asp:RequiredFieldValidator>

td>

tr>

<tr>

<td align="center">

<strong style="font-size: 18px;">Password strong>

td>

tr>

<tr>

<td align="center">

<asp:TextBox ID="txtpass" Height="30px" Width="200px" TextMode="Password" runat="server">asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="Dynamic" ValidationGroup="Submit" ControlToValidate="txtpass" ForeColor="Red" ErrorMessage="Enter Password">asp:RequiredFieldValidator>

td>

tr>

<tr>

<td align="center">

<asp:Button ID="Button1" runat="server" Text="Signin" OnClientClick="return validate();">asp:Button>td>

tr>

tbody>

table>

td>

tr>

tbody>

table>

div>

<div style="margin-top: 300px;">

div>

div>

form>

body>

html>

Kindly accept the answer.
0
umair mohsin11y ago
hi Upendra Pratap Shahi your code is working but when i leave button textbox border disappears.what to do to persist that red colored border on the textbox
0
Rahul Prajapat11y ago
hello @umair you can change the textbox style by javascript function on OnClientClick event. Try this :

script type="text/javascript">
function chng() {
document.getElementById('TextBox1').style.border = "2px solid #ff0000";
}

onclick="Button1_Click1" />
0
Rajeesh Menoth11y ago
Hi,

Ref this link also :

http://savotdane.blogspot.in/2008/10/hightlight-or-change-background-color.html

http://www.aspdotnet-suresh.com/2011/12/jquery-highlight-border-and-background.html
0
Upendra Pratap Shahi11y ago
Hello ,

Go through below link-

http://www.c-sharpcorner.com/Blogs/13925/change-background-and-border-color-of-invalid-controls-when.aspx

Kindly accept the answer.
0
Rojalin Sahoo11y ago
Hello,
check this link may help you:
http://www.aspsnippets.com/Articles/Change-Background-and-Border-Color-of-Invalid-Controls-when-Validation-fails-in-ASP.Net.aspx
0