How to use watermark property on password textbox in a web-page?

Here I am giving you an example where you can see that watermark property works fine with required field validator in Asp.Net. This whole process can be done by using simple jQuery tricks.
In my concept we have 2 textboxes and one of them is

<asp:TextBox ID="txtPassword" runat="server" Style="height: 18px; width: 250px; line-height: 18px; display: none;" MaxLength="50" TextMode="Password" CssClass="txt" />

and another textbox is

<asp:TextBox ID="txtPassword1" runat="server" Style="height: 18px; width: 250px; line-height: 18px;" MaxLength="50" TextMode="SingleLine" CssClass="txt" />

At the initial time of page load “txtPassword” taxtbox has “display;none” property.
and its hide and show will be maintained by jQuery function.
Example :
use this code in aspx page:

<asp:TextBox ID="txtPassword" runat="server" Style="height: 18px; width: 250px; line-height: 18px; display: none;" MaxLength="50" TextMode="Password" CssClass="txt" />
<asp:TextBox ID="txtPassword1" runat="server" Style="height: 18px; width: 250px; line-height: 18px;" MaxLength="50" TextMode="SingleLine" CssClass="txt" />
<asp:RequiredFieldValidator ControlToValidate="txtPassword" ID="RequiredFieldValidator3" runat="server" ErrorMessage="Enter password" Text="Enter password" Display="Dynamic" SetFocusOnError="true" ValidationGroup="valid" />
<asp:RequiredFieldValidator ControlToValidate="txtPassword1" ID="RequiredFieldValidator1" runat="server" ErrorMessage="" Text="" Display="Dynamic" InitialValue="Enter Password Here" SetFocusOnError="true" ValidationGroup="valid" />

javascript code at the end on the page:

<script type="text/javascript">
jQuery(document).ready(function () {
passtxtfnWaterMark('<%= txtPassword1.ClientID %>', '<%= txtPassword.ClientID %>', 'Enter Password Here');
});
</script>

and this jQuery function is use for watermark property:

function passtxtfnWaterMark(txtModeID, passModeID, WaterMarkText) {
jQuery("#" + txtModeID).addClass("water").val(WaterMarkText);
jQuery("#" + txtModeID).focus(function () {
jQuery("#" + passModeID).css('display', 'block');
jQuery("#" + passModeID).focus();
jQuery(this).css('display', 'none');
});
jQuery("#" + passModeID).blur(function () {
if (jQuery(this).val() == "") {
jQuery("#" + txtModeID).css('display', 'block');
jQuery(this).css('display', 'none');
jQuery("#" + txtModeID).val(WaterMarkText)
}
else {
jQuery("#" + txtModeID).val(WaterMarkText + ".")
}
});
jQuery("#" + passModeID).blur();
}

By implementing this example you can find a great watermark property in your site.