I was working with a customer who has invested
a lot in redoing the validation in their web application. I accidentally
suggested wouldn't it be nice if we could change the background or border of the
field in question. The customer loved this idea which meant I'd just created
more work for myself.
![Validation Change color]()
Place
this in your page head Section
<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>
Form tag
in your page just Replace by this
<form
id="form2"
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 Login</strong>
</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:imagebutton
id="ImageButton1"
validationgroup="Submit"
height="45px"
width="100px"
onclientclick="return
validate();" imageurl="~/images/btn_sign-in2x.png"
runat="server"
onclick="ImageButton1_Click">
<%-- IF
YOU DON'T HAVE IMAGE FOR IMAGE BUTTON THEN USE THIS NORMAL BUTTON WHICH IS
COMMENTED ---%>
<%--<asp:button
id="Button1" runat="server" text="Signin" onclientclick="return validate();">---%>
<%-- IF
YOU DON'T HAVE IMAGE FOR IMAGE BUTTON THEN USE THIS NORMAL BUTTON WHICH IS
COMMENTED ---%>
</asp:button></asp:imagebutton></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
<div style="margin-top:
300px;">
</div>
</div>
</form>