Hello Friends
My Problem is:
I want to change the background of textbox and display a message with a warning picture if user dont enter anything in the textbox.
I have used div,a textbox,required field validator and validator callout extender.
My code is here
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto"%>
<%
@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<title></title>
<link id="link1" rel="Stylesheet" href="StyleSheet.css" runat="server" />
<script type="text/javascript">function ss() {
var val;val = document.getElementById("tbName");
if (val == null) alert("Enter Something in Textbox");
else
rr();
}
function rr() {document.getElementById("aa").className = "errBar";
}
function changeBackground() {document.getElementById("bb").className = "errBar";
}
</script>
<style type="text/css">
/* form validation/messaging classes */.errBar{background:url(images/error_ar.gif) no-repeat -1em 0;z-index:0;}
.yflderr label, div.yflderr .ymsgerr, div.yflderr div.ymemforminput span{color:#c00e0c;font-weight:bold}.yflderr{background-image:url(images/error_bg.gif)}
.yflderr .ymemformlabel{width:25%}.errIcon{padding-left:20px;background:url(images/error_ba.gif) no-repeat 0 1px}
.statusIcon{display:none}label.notreq{font-style:italic;}
</style> </head>
<
body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server">
<div id="aa">
<asp:RequiredFieldValidatorID="RFV_tbName" runat="server"
ErrorMessage="Field is required"
ForeColor="red"Display="Dynamic" SetFocusOnError="True"
ControlToValidate="tbName">
<img src="images/error_ba.gif" alt="me" />
</asp:RequiredFieldValidator>
<span class="yflderr">
<asp:Label ID="lbl" runat="server" Text="UserName"></asp:Label>
</span>
<span>
<asp:TextBox ID="tbName" runat="server" onBlur="ss();"></asp:TextBox>
</span>
<cc1:ValidatorCalloutExtender ID="RFV_tbName_ValidatorCalloutExtender"
runat="server" Enabled="True"
TargetControlID="RFV_tbName" CssClass="yflderr"
WarningIconImageUrl="images/helper_a.gif" ></cc1:ValidatorCalloutExtender> </div>
<div id="bb">
<asp:RequiredFieldValidator ID="RFV_tbPassword"
runat="server" ErrorMessage="Password is required"
ControlToValidate="tbPassword" Display="Dynamic"
SetFocusOnError="True">
<img src="images/error_ba.gif" alt="me" /></asp:RequiredFieldValidator>
<span>Password</span>
<span><asp:TextBox ID="tbPassword" runat="server" onBlur="changeBackground();"></asp:TextBox><cc1:ValidatorCalloutExtender
ID="RFV_tbPassword_ValidatorCalloutExtender" runat="server" Enabled="True"
TargetControlID="RFV_tbPassword"CssClass="yflderr"
WarningIconImageUrl="images/helper_a.gif" >
</cc1:ValidatorCalloutExtender>
</span>
<br />
<br />
<asp:Button ID="btn_Submit" runat="server" Text="Submit" />
</div>
</asp:Panel>
</div>
</form>
<p>
</p>
</body>
</
html>
But its not working exactly.Required field validator is fired after button click.I want it to be fired as soon as focus lost from textbox.
It also not retrieving the value of textbox in javascript
var val;val = document.getElementById("tbName");
if (val == null)
If Im doing any mistake.
Plz help