0

我对 JQuery 验证器有疑问。仅当我首先按下提交按钮时，验证开始才有效。但我只想在表单有效的情况下提交。而且我不知道为什么验证字段也会在它之后形成。请在 JS 代码中查看我的评论

<script src="/static/js/jquery.hint.js" type="text/javascript"></script>
<script src="/static/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/js/additional-methods.js" type="text/javascript"></script>

<script type="text/javascript">

    function ValidateForm (e) {
       //fix for hint
        setTimeout(function() 
                    { $('input').focus(); },
                500);

        return $("#contactForm").valid(); //this should prevent call of click event but I don't know why form first time is valid always :(      
    }

    jQuery(function ($) {
        var container = $("div.container"), validator;

        $(":input[data-hint-title]").hint();
        // validate the form when it is submitted
        validator = $("#contactForm").validate({
            errorContainer: container,
            errorLabelContainer: $("ol", container),
            wrapper: "li",
            meta: "validate",
            rules: {
                firstname: "required",
                lastname: "required",
                address: "required",
                city: "required",
                zipcode: "required",
                country: "required",
                phone: "required",
                email: {
                    required: true,
                    email: true
                },
                confirmEmail: {
                    required: true,
                    email: true,
                    equalTo: "#email"
                },
                message: {
                    required: true,
                    maxlength: 600
                }
            }
        });

        validator.resetForm();
    });

</script>

这是 HTML 代码的剪切形式

<form id="contactForm" action="" method="POST" runat="server" ClientIDMode="Static">
<asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
<fieldset>
    <div class="row justify ibChildren">
        <span>
            <asp:TextBox runat="server" ID="firstname" data-hint-title="* first name" CssClass="required" ClientIDMode="Static" />
            </span>
        <span>
        <asp:TextBox runat="server" ID="lastname" data-hint-title="* last name" CssClass="required" ClientIDMode="Static" />

            </span>
    </div>

        <span>
         <asp:TextBox runat="server" ID="country" data-hint-title="* country" CssClass="required" ClientIDMode="Static" />

            <%--<input type="text" name="seach" value="" id="country" data-hint-title="Country" class="required" />--%></span>
    </div >
    <div class="row justify ibChildren">
        <span>
         <asp:TextBox runat="server" ID="phone" data-hint-title="* phone" CssClass="required" ClientIDMode="Static" />

            <%--<input type="text" name="seach" value="" id="phone" data-hint-title="Phone" />--%></span>
        <span>
           <%-- <input type="text" name="seach" value="" id="email" data-hint-title="Email" class="required"
                type="email" />--%>
                <asp:TextBox runat="server" ID="email" data-hint-title="* email" CssClass="required" ClientIDMode="Static" />

                </span>
    </div>
    <div class="row justify ibChildren">
        <span>
         <asp:TextBox runat="server" ID="productname" data-hint-title="product (name, shade, item #) other" ClientIDMode="Static" />
            <%--<input type="text" name="seach" value="" id="productName" data-hint-title="Product Name" class="required" />--%></span>
        <span>
             <asp:TextBox runat="server" ID="confirmEmail" data-hint-title="* confirm email" CssClass="required" ClientIDMode="Static" />

            <%--<input type="text" name="seach" value="" id="confirmEmail" data-hint-title="Confirm Email"
                class="required" type="email" />--%></span>
    </div>
    <div class="row full">
     <asp:TextBox runat="server" ID="message" TextMode="multiline" data-hint-title="* message" CssClass="required" ClientIDMode="Static" Columns="20" Rows="2" />
    </div>
    <div class="row submit">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
                Processing ...
            </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:Label ID="lblStatus" runat="server" Text="" CssClass="requiredHint"></asp:Label>
    <asp:Button id="sendMail" runat="server" Text="Submit" CssClass="submit" OnClick="Send_Click" OnClientClick="ValidateForm();"  /></ContentTemplate>
  </asp:UpdatePanel>
    </div>
</fieldset>

<!-- our error container -->
<div class="container" >
    <h4>There are serious errors in your form submission, please see below for details.</h4>
    <ol>
        <li><label for="<%= firstname.ClientID %>" class="error">Please enter your first name</label></li>
        ...........
        <li><label for="<%= lastname.ClientID %>" class="error">Please enter your last name</label></li>   
    </ol>
</div>
</form>
4

1 回答 1

0

改变

OnClientClick="ValidateForm();"

经过

OnClientClick="return ValidateForm();"
于 2012-09-27T19:09:35.107 回答