Javascript 使用jquery进行带水印的asp.net表单验证

Javascript 使用jquery进行带水印的asp.net表单验证,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我有一个带有水印的asp.net表单,如下所示: <form id="form1" runat="server"> <div class="form-inner"> <asp:TextBox ID="firstname" runat="server" value="First Name *" title="First Name *" cla

我有一个带有水印的asp.net表单,如下所示:

   <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>
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");
            }
        });
}); 
我想验证此表单,但由于存在水印,因此未对其进行验证

我正在使用这个插件进行验证

请给我建议解决办法


感谢您对初始化验证器的方式做出一些假设,您可以尝试替换验证器的元素和表单函数(和)

以下是元素函数的示例:

    $().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;
                }
        };
    });

您是否可以发布一个关于您的问题的实时链接,并描述哪些问题没有按照您希望的方式工作?或者,发布一个截图什么的?没有显示验证代码?什么不起作用?你得到了什么例外情况,什么时候,或者你期望发生什么,什么时候,以及实际发生了什么?我想你可以在提交表单时,清空所有的“.water,.inpt”,其中val()==title@user1477388:water mark正在工作,但验证未启动,因为文本框不是空的。很难理解。水印不只是您要添加的一个类吗?那么,文本框不应该还是空的吗。此外,验证应该在框为空时触发,但也应该在框中包含错误数据时触发。