watermarked asp.net form validation using jquery

Question

I have an asp.net form with watermarks like this:

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

<div class="form-inner">
                            <asp:TextBox ID="firstname" runat="server" value="First Name *" title="First Name *"
                                class="water"></asp:TextBox>
                            <asp:TextBox ID="lastname" runat="server" value="Last Name *" title="Last Name *"
                                class="water"></asp:TextBox>
                            <%--<input name="" value="Address *" title="Address *" type="text" class="water"/>--%>
                            <asp:TextBox ID="Address" runat="server" value="Address *" title="Address *" class="water"></asp:TextBox>
                            <%-- <input name="" value="City *" title="City *" type="text" class="water"/>--%>
                            <asp:TextBox ID="City" runat="server" value="City *" title="City *" class="water"></asp:TextBox>
                            <div>
                                <asp:DropDownList ID="drpStates" runat="server" CssClass="inpt">                                    
                                <asp:ListItem Selected="True">State*</asp:ListItem>
                                    <asp:ListItem>ACT</asp:ListItem>
                                    <asp:ListItem>NSW</asp:ListItem>
                                    <asp:ListItem>NT</asp:ListItem>
                                    <asp:ListItem>SA</asp:ListItem>
                                    <asp:ListItem>VIC</asp:ListItem>
                                    <asp:ListItem>WA</asp:ListItem>
                                </asp:DropDownList>

                                <%--  <input class="inpt" name="postalcode" id="postalcode" value="Postcode *" type="text"/>--%>
                                <asp:TextBox ID="postalcode" runat="server" class="inpt" title="Postcode *" value="Postcode *"></asp:TextBox>
                            </div>
                            <%-- <input name="" value="Phone number *" title="Phone number *" type="text" class="water"/>--%>
                            <asp:TextBox ID="txtPhoneNumber" runat="server" value="Phone number *" title="Phone number *"
                                class="water"></asp:TextBox>
                            <%-- <input name="" value="Email *" title="Email *" type="text" class="water"/>--%>
                            <asp:TextBox ID="txtEmail" runat="server" value="Email *" title="Email *" class="water"></asp:TextBox>
                            <div class="form-term">
                                <div class="chk-up">
                                    <%--<input name="" type="checkbox" value="" />--%>
                                    <asp:CheckBox ID="chkInsurance" runat="server" Text="Yes, include my free $ 15,000 Insurance" />
                                </div>
                                <div>
                                    <%--<input name="" type="checkbox" value="" checked="checked" />--%>
                                    <asp:CheckBox ID="chkNews" runat="server" Text="Yes, I would like to receive latest news" />
                                </div>
                            </div>
                            <div class="send-btn">
                                <%-- <a href="#">SEND ME A SECURE GOLD PACK</a>--%>
                                <asp:LinkButton ID="lnkSendEmail" runat="server" OnClick="lnkSendEmail_Click">SEND ME A SECURE GOLD PACK</asp:LinkButton>
                            </div>
                        </div>

and water mark code is like this:

jQuery(document).ready(function () {

        $(".water,.inpt").each(function () {
            $tb = $(this);
            if ($tb.val() != this.title) {
                $tb.removeClass("water");
            }
        });

        $(".water,.inpt").focus(function () {
            $tb = $(this);
            if ($tb.val() == this.title) {
                $tb.val("");
                $tb.removeClass("water");
            }
        });

        $(".water,.inpt").blur(function () {
            $tb = $(this);
            if ($.trim($tb.val()) == "") {
                $tb.val(this.title);
                $tb.addClass("water");
            }
        });
}); 

I want to validate this form but due to water marks it is not being validated.

I am using this plugin for validation.

http://jquery.bassistance.de/validate/demo/themerollered.html

Please suggest me solution to it.

Thanks

Answer 1

Making some assumptions about the way you initalize your validator, you may try to replace both the element and form functions of your validator ( http://docs.jquery.com/Plugins/Validation/Validator/element#element and http://docs.jquery.com/Plugins/Validation/Validator/form )

Here is an example with the element function:

    $().ready(function() {
        var myValidator = $("form")
                          .validate({...,
                                success: ...,
                                rules:... 
                         });

        // save the 'element' function              
        myValidator.elementSave = myValidator.element;
        // create a new 'element' function that reinit the unchanged watermarked input
        // before performing check with the 'saved' element function
        myValidator.element = function (elem) {
            if (!($(elem).is('.water,.inpt')))
                return myValidator.elementSave(arguments);
            else {
                var save = $(elem).val();
                if (save == elem.title)
                    $(elem).val('');
                var result = myValidator.elementSave(arguments);
                $(elem).val(save);
                return result;
                }
        };
    });