I'm using a jQuery watermark plugin (watermark-1.2.jquery.min.js) to make textboxes have watermark text (e.g., the textbox will read as "First Name", but gets cleared when the user clicks the textbox). It's working fine for the most part, except for one niggling issue.
I have a few validators (e.g., RequiredFieldValidator) on the textboxes with EnableClientScript set to true. This means that when the textboxes don't contain valid data, an AJAX postback does not occur (say, when I click a button in the same validation group). Lucky for me, the watermark plugin clears the watermark before postback. However, that is a problem when validation fails and the postback is prevented, as the plugin clears the watermark even though a postback didn't occur.
I am hoping there is a JavaScript event ASP.NET provides so I can intercept a failed client-side validation and re-enable the watermark.
Note that I'm currently using
add_pageLoaded to detect a page load after an AJAX postback and that is working fine. I just need to figure out how to call some code when the a button is clicked but the postback is aborted.
In the worst case, I can just disable client-side validation, but I'd rather not do that.
EDIT: Here is some sample code to demonstrate the issue (you can ignore the giant block of JavaScript, as I just embedded that so you can run this without external dependencies):
<%@ Page Language="vb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample of Blocked Ajax Postback Issue</title>
</head>
<body>
<form runat="server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function (a) {
var b = { init: function (c) {
var d = this; return this.each(function (f) {
var e = { watermarkText: "Enter Text", watermarkCss: "watermarkCss", disableAutocomplete: false };
f === 0 && a(document.forms).bind("submit.watermark", d, b.formSubmit);
c && a.extend(e, c); if (a(this).val().length === 0) e.isWatermarked = true;
if (e["disableAutocomplete"] === true) a(this).attr("autocomplete", "off");
else a(this).removeAttr("autocomplete");
a(this).data("settings", e).bind("keypress.watermark", b.keypressProcessing).bind("focus.watermark",
b.focusProcessing).bind("blur.watermark", b.blurProcessing).blur()
})
}, keypressProcessing: function () {
var b = a(this).data("settings"); b.isWatermarked = false
}, focusProcessing: function () {
var b = a(this).data("settings");
(a(this).val().length == 0 || a(this).val() == b.watermarkText && b.isWatermarked) &&
a(this).val("").removeClass(b.watermarkCss)
},
blurProcessing: function () {
var b = a(this).data("settings"); if (a(this).val().length == 0) {
a(this).val(b.watermarkText).addClass(b.watermarkCss); b.isWatermarked = true
}
}, formSubmit: function (b) {
a.each(b.data, function () {
var b = a(this).data("settings"); a(this).val() == b.watermarkText && b.isWatermarked &&
a(this).val("")
})
}
}; a.fn.watermark = function (c) {
if (b[c]) return b[c].apply(this, Array.prototype.slice.call(arguments, 1));
else if (typeof c === "object" || !c) return b.init.apply(this, arguments);
else a.error("Method " + c + " does not exist on watermark.") } })(jQuery)
</script>
<asp:ScriptManager runat="server" ID="mainManager" EnablePartialRendering="true" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<p>
<asp:TextBox ID="txtEmail" runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtEmail" Display="Dynamic"
EnableClientScript="true" Text="*" ValidationGroup="Group1" />
<asp:RegularExpressionValidator runat="server" ControlToValidate="txtEmail" Display="Dynamic"
EnableClientScript="true" Text="*" ValidationGroup="Group1" ValidationExpression=".+@.+\..+" />
</p>
<p>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="Group1" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
$("#" + "<%= txtEmail.ClientID %>").watermark({
watermarkText: "Email",
watermarkCss: "active_watermark"
});
});
</script>
</form>
</body>
</html>