2012-09-27 21 views
0

我有一个JQuery验证器的问题。如果我先按提交按钮,验证开始工作。但是,如果表单有效,我想提交。而且我不知道为什么验证字段也会在后面形成。请参阅我的JS代码注释JQuery验证程序在第一次提交后工作 - asp .net

<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> 

<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> 
+0

的HTML代码切形式是否有任何理由,你为什么没有使用ASP.NET验证器? – Jupaol

+0

我不喜欢它们,它们不像我那么灵活和沉重 –

+0

有一个'CustomValidator',您可以使用它来编写自定义验证逻辑。关于你的代码的主要问题是你需要复制你的验证逻辑(在JavaScript和服务器级别) – Jupaol

回答

0

变化

OnClientClick="ValidateForm();" 

通过

OnClientClick="return ValidateForm();" 
+0

对不起,但这不是案例 –

+0

@cleric:“ValidateForm”第一次返回true吗? –

+0

是的,第二次假的情况下形式无效 –

相关问题